Summary of two methods to implement vue printing function

Method 1: Install the plugin via npm

1. Install npm install vue-print-nb --save

2. After installation, import it into the main.js file

import Print from 'vue-print-nb' Vue.use(Print); //Register

3. Now you can use it

<div id="printTest" >

  <p>The moon shines on the mountains</p>

    <p>The breeze comes from the river</p>

</div>

<button v-print="'#printTest'">Print</button>

4. To print via the link address: window.location.href = airway_bill; airway_bill is the link address.

5. If the content is not printed completely, click More Settings during the print operation, and then set the zoom.

The second method: manually download the plug-in to the local

Plugin address:

https://github.com/xyl66/vuePlugs_printjs

1. Create a new folder plugs under src, put the downloaded print.js into the plugs folder, and then do the following

import Print from '@/plugs/print'
Vue.use(Print) // Register <template>
  <section ref="print">
    Print content <div class="no-print">Don't print me</div>
  </section>
</template>
this.$print(this.$refs.print) // Usage

2. Note: You need to use ref to get the DOM node. If you get it directly by id or class, the printed content will be empty after webpack packaging and deployment.

3. Specify the non-printing area

Method 1. Add no-print style class

<div class="no-print">Don't print me</div>

Method 2. Custom class name

<div class="do-not-print-me-xxx">Don't print me</div>this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // Use

Batch Printing

Batch printing here actually uses pure js writing, let's go directly to the code:

<template>
    <div>
        <ul class="print-ul">
            <li v-for="(item,index) of tableData" :key="index" 
                :id="'printDiv' + index" style="page-break-after:always;">
                <div>
                    <p>{{item.date}}</p>
                    <p>{{item.name}}</p>
                    <p>{{item.province}}</p>
                    <p>{{item.city}}</p>
                    <p>{{item.address}}</p>
                    <p>{{item.zip}}</p>
                </div>
            </li>
        </ul>
        <div @click="handlePrint">Print</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [{
                    date: '2016-05-03',
                    name: 'Wang Xiaohu',
                    province: 'Shanghai',
                    city: 'Putuo District',
                    address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai',
                    zip: 200333
                }, {
                    date: '2016-05-02',
                    name: 'Wang Xiaohu',
                    province: 'Shanghai',
                    city: 'Putuo District',
                    address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: 'Wang Xiaohu',
                    province: 'Shanghai',
                    city: 'Putuo District',
                    address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: 'Wang Xiaohu',
                    province: 'Shanghai',
                    city: 'Putuo District',
                    address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai',
                    zip: 200333
                }, {
                    date: '2016-05-08',
                    name: 'Wang Xiaohu',
                    province: 'Shanghai',
                    city: 'Putuo District',
                    address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai',
                    zip: 200333
                }, {
                    date: '2016-05-06',
                    name: 'Wang Xiaohu',
                    province: 'Shanghai',
                    city: 'Putuo District',
                    address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai',
                    zip: 200333
                }, {
                    date: '2016-05-07',
                    name: 'Wang Xiaohu',
                    province: 'Shanghai',
                    city: 'Putuo District',
                    address: 'No. 1518, Jinshajiang Road, Putuo District, Shanghai',
                    zip: 200333
                }]
            }
        },
        methods: {
            handlePrint() {
                var newWin = window.open(""); //Open a new empty window for (var i = 0; i < this.tableData.length; i++) {
                    var imageToPrint = document.getElementById("printDiv" + i); //Get the content to be printed newWin.document.write(imageToPrint.outerHTML); //Add the content to be printed to the new window}
                const styleSheet = `<style>li{list-style:none}</style>`; 
                newWin.document.head.innerHTML = styleSheet; //Add style to the printed content newWin.document.close(); //This sentence must be added when used in IE browser newWin.focus(); //This sentence must be added when used in IE browser setTimeout(function() {
                    newWin.print(); //Print newWin.close(); //Close the window }, 100);
            }
        }
    }
</script>

<style>
    .print-ul {
        width: 600px;
        list-style: none;
        border: 1px solid #e8e8e8;
    }
</style>

Summarize

This is the end of this article about the implementation of vue printing function. For more relevant vue printing function content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: