Installation and use

npm install vue-print-nb --save
Copy the code

Global import in main.js

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

Page usage (see npmjs.com for more details)

< div id = "printMe" > < p > print content < / p > < / div > < button v - print = "' # printMer" > print < / button >Copy the code

Header footer string problem

Print preview found page header footer will have the page number url undefined character

  1. Direct use of style solution, the advantage is simple and rough, the disadvantage is that the upper and lower margins of the page do not exist, there is no upper and lower margins of the page, looking at the printed content is too narrow

Set it to 3mm as shown in the image below to hide the header footer

@media print {@page{size: auto; margin: 3mm; }}Copy the code
  1. The Settings are cancelled when previewing Settings

The contents are not displayed completely during printing

In the actual page, if the height is not enough, part of the content is hidden. In this case, the content of the corresponding block should be hidden and the scrolling content should be displayed as full display. The hidden content will not be printed, but only the content directly displayed on the page will be printed

@media print {@page{size: auto; margin: 3mm; } body{ height:auto; // In the actual page height is not enough part of the content hidden}}Copy the code

The style disappears when it prints

The root cause of the style disappearing is that the style written on the outer layer of the print content and the style of some of the frames that were used didn’t get the iframe content of the print block when it was printed, and if you know that the content of the print block needs to be printed, Do not use any UI framework or other external SCSS or LESS content for the table or block content. The external class name is not available, and all styles within it are not available. Either write the imported style address according to the API separately, and the convenient way is inline style or write internal style

<div class="box"> <div id="printTest"> <div class="print-style"> </div> <div> <style lang=" SCSS "scoped> # print-ttest {} // void # print-ttest {} // void.Copy the code

When printing, add watermarks according to content pagination and content

If there are multiple tables or content blocks during printing, you can divide them by calculation and add watermarks to each page

<div id="printTest"> <div class="printPage printMark" V -for="item in 5" :key="item" @media print { @page{ size: auto; margin: 3mm; } body{ height:auto; } .printPage { height: 291mm; // Paging according to actual position: relative; &::before { position: absolute; Content: 'xx watermark '; top:20%; right: 5%; font-size: 48px; Opacity: 0.1; transform: rotate(30deg); } &::after { position: absolute; Content: 'xx watermark '; bottom:20%; left: 5%; font-size: 48px; Opacity: 0.1; transform: rotate(30deg); }}}Copy the code