This is the 11th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

I. Overview of functions

1.1 requirements

Then the QR code that was generated before, we need to front print it. Here’s how I tried it.

Required to be able to batch print and separate print two-dimensional code picture information. Then you can only print one page per page.

1.2 Page effect diagram

Ii. Functional realization

There are two common methods of Vue printing:

  • Reference the vue-print-nb plug-in

  • Download print.js to your local file:

    • 1, download address: github.com/xyl66/vuePl…

    • 2. Global registration (main.js)

      Import Print from './plugins/ Print 'vue.use (Print) // RegisterCopy the code

    • 3, use,

      <div ref="print" > <p> <p class="no print"> </p> <div class="no print"> </p> </div> < button@click ="handlePrintText"> </button> <! --no-print style class for not printing area -->Copy the code
      methods:{
  handlePrintText(){
    this.$print(this.$refs.print)
  }
}
Copy the code

I chose the vue-print-nb method after trying it out.

2.1 Introduction to vue-print-nb

1, install,

npm i vue-print-nb -S
Copy the code

2. Global Registration:

import Print from 'vue-print-nb'
Vue.use(Print)
Copy the code

3. Instructions for use:

The information of the QR code is a URL link. If you click the batch print directly, the content printed must be what is displayed on this page. If you find out the list, you must load it and present it on the page before the front end can preview printing. So here we need to redirect it to the page and show what we’re going to print.

4. Query and jump

<giant-print-page @editshow ="printBatch(scope.row)"> </giant-print-page> </ giant-printBatch (row){ this.$router.push({path:'/am/device/print',query: {id:row.id}}) },Copy the code

The content to be printed is displayed on the print.vue page

<div> <button v-print="'#printTest'"> </button> < button@click ="backlist"> {{this.$data.deviceInfoList.length}}</h2> <div id="printTest" > <div v-for="(item,index) in this.$data.deviceInfoList"> <div> <h2> < span style="width:260px; height:260px;" /> </div> </div> </div> </div> mounted() { this.init() }, methods:{ init(){ if(this.$route.query.id! =null){this.printBatch(this.$rout.query.id)}} // printBatch(id){this.$data.deviceInfodto ={id:id} let device=this.$data.DeviceInfoDTO this.$api.req("/am/device/info/list",device,res=>{ this.$data.deviceInfoList=res.data this.$data.dialogVisible=true },res=>{ this.$message.error(res.msg) }) }, }Copy the code

The page you enter looks like this

Then click Print now to render the page:

2.2 the paging

This print effect does not meet the requirement of showing one QR code on one page.

After searching, you can add the page-break-after:always tag to your CSS. Reference the ID by #

<div> <button v-print="'#printTest'"> </button> < button@click ="backlist"> {{this.$data.deviceInfoList.length}}</h2> <div id="printTest" > <div v-for="(item,index) in this.$data.deviceInfoList"> < span style="width:260px; padding: 0px; padding: 0px; height:260px;" /> </div> </div> </div> </div>Copy the code

Third, summary

In general, the use of vue-print-nb plug-in is relatively simple, but here is only to use the function of batch printing TWO-DIMENSIONAL code, so this plug-in is only the entry level use, more details can see the API of the official document.

However, after the test, if you need to preview the page is very much, such as my side of the need to print hundreds of thousands of TWO-DIMENSIONAL code information, then the front page is impossible to render.

After the test, it takes about 10 seconds to preview 522 TWO-DIMENSIONAL codes, so we need to put the information of printing two-dimensional codes in the background. Therefore, although the Vue front-end printing function has been implemented, unfortunately, it does not meet our requirements. However, we need to record the process for future use. As for how to print this information in the background, I will post a record after MY experiment comes out.

Reference documents:

  • www.npmjs.com/package/vue…