Vue project browser pop-up printing function

preface

The browser has its own printing function. Generally, you can right-click and click Print to turn on the browser printing function, but this is printed content is the content of the browser’s current interface. Now in the project, you need to click the “print” button on the interface, pop up the popup box, and then click “Print” to directly adjust the browser to print. The following is the concrete implementation of the pop-up printing scheme.

The overall effect achieved is as follows

Click the “print” button to pop up the “print” box

When there is a lot of printing content or paging, a scroll bar will appear in the pop-up box to prevent the height of the pop-up box from being too high, but the printing content will be all contents in the pop-up box. Click to print directly, and the pop-up box of the browser printing function will be directly suspended

Concrete implementation steps

The function of pop-up printing is mainly realized by vue-print-NB plug-in

  1. Download the vue-print-nb dependency
npm i vue-print-nb
Copy the code
  1. It is referenced in main.js
import Print from 'vue-print-nb'
Vue.use(Print)
Copy the code

3. Create the pop-up content

     <! -- Print button, trigger popbox -->
    <el-button @click="printVisible=true">print<el-button> 
    <! - printing - >
    <el-dialog title="Release list" :visible.sync="printVisible">
      <! -- startprint -->
        <div class="box">
            <div id="printMe" class="printMe" v-if="printVisible">
              <OutPutPrint  :vehicleId="carInfo.vehicleId"></OutPutPrint>
            </div>
        </div>
      <! -- startprint -->
      <div style="text-align: right;">
      <el-button v-print="printObj" type="primary">Print directly</el-button>
      <el-button @click="printVisible = false">cancel</el-button>
      </div>
    </el-dialog>
 <script>
 export default {
  data () {
    return {
      printObj: {
        id: 'printMe'.popTitle: 'print'.openCallback: (e) = > {
          this.printVisible = false
        },
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'}},Copy the code

OutPutPrint is the template for specific print content, which can be written here according to the actual situation. Click the “Print” button to pop up the pop-up box, and then click “Print Directly” to realize the basic printing function

Problem 1: Because of too much printing content, the frame is stretched too high, which is not beautiful, so we introduce a style

.box {
  height: 600px;
  overflow-y: scroll;
}
.printMe {
  height:auto;
}
Copy the code

We’re going to introduce a.box div, which controls the height of the popbox, and we’re going to set a certain height so that the popbox is always at the height that we want it to be, and we’re going to scroll beyond that. We then add a style to the specific content we want to print to make it highly adaptive, so that when we hit Print directly, we’re done getting everything we scroll down.

Question 2: When we click “Print directly”, the pop-up box of the browser pops up. After clicking “print”, we need to make a callback to change the printing state of our data. Here, the vue-print-NB plug-in blocks a callback method opened by the pop-up box of the printing function, and we use the openCallback method to achieve this

 export default {
  data () {
    return {
      printObj: {
        id: 'printMe'.popTitle: 'print'.openCallback: (e) = > {
          this.printVisible = false
        },
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'}},watch: {
    'printVisible' (val) {
      console.log(val,"val")
      if(! val) {this.getData()
      }
    },
  }
Copy the code

In the callback function, close our popbox, monitor the popbox closed state, when closed, perform the operation we need to refresh, so as to ensure the modification of the data printing state.

Reference: www.cnblogs.com/steamed-twi…