Shulou(Shulou.com)05/31 Report--

This article mainly explains "VUE how to use vue-print-nb to achieve printing function", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "VUE how to use vue-print-nb to achieve printing function" bar!

First, install vue-print-nb

There is no prerequisite, it can be installed directly, but because Vue2.0 and Vue3.0 have different uses, so the version that needs to be installed is also different, it is up to you to choose.

Vue2.0 version installation method:

Npm install vue-print-nb-save

Vue3.0 version installation method:

Npm install vue3-print-nb-- save II. Introduction of Vue project

How to introduce Vue2.0:

/ / 1. Global mount import Print from 'vue-print-nb'Vue.use (Print) / / or// 2. Custom directive import print from' vue-print-nb'directives: {print}

How to introduce Vue3.0:

/ / 1. Global mount import {createApp} from 'vue'import App from'. / App.vue'import print from 'vue3-print-nb'const app = createApp (App) app.use (print) app.mount (' # app') / / or / / 2. Custom instruction import print from 'vue3-print-nb'directives: {print} 3. Parameter description parameter action type options default value id local printing is valid, identifier String-'printId'standard local printing is valid, printed text type StringHTML5/loose/strictHTML5extraHead local printing is valid, adding String--extraCss local printing at the top of the print area is valid, providing Stylesheet style table for the print area String--popTitle local printing is valid Edit the title of the header String-Document TitleclickMounted is valid globally, call v-print bound button click event callbackFunction-this.ObjectopenCallback is globally valid, call callbackFunction-this.ObjectcloseCallback when printing is globally valid, call callback that closes printing (unable to confirm or cancellation) Function-this.ObjectbeforeOpenCallback is globally valid, and call callbackFunction-this.Objectpreview before printing is globally valid Control print Preview Booleantrue/falsefalsepreviewTitle Edit Preview Page Preview title String-' print Preview 'previewPrintBtnLabel Edit Preview Page print Button text String-' print' previewBeforeOpenCallback call before opening the preview page callbackFunction-this.ObjectpreviewOpenCallback call after opening the preview page callbackFunction-this.Objecturl non-local printing is valid, print the specified URL, ensure that the same origin policy with the same String--asyncUrl non-local printing is valid, asynchronously load the print specified URL Make sure the Function--zIndex preview of the same origin policy is valid. The z-index of the preview window is 20002 by default, preferably higher than the default value, String,Number- 20002. 4, apply

Template example:

{{msg}} Essential Links / / partial print text and button Print Area Print! Core Docs Forum Community Chat Twitter

Docs for This Template Ecosystem vue-router vuex vue-loader awesome-vue

Script example:

Export default {name: 'HelloWorld', data () {let that = this return {msg:' Welcome to Your Vue.js App', print: {id: 'printArea', popTitle:' configure header title', / / print the title at the top of the configuration page extraHead: 'print', / / the top header text, additional tags attached to the head tag Use comma to split preview: true, / / whether to start preview mode, default is false previewTitle: 'preview title', / / print preview title previewPrintBtnLabel: 'preview over, start printing', / / print preview button text below the title, click to enter the print zIndex: 20002, / / preview window z-index, the default is 20002 Preferably higher than the default previewBeforeOpenCallback () {console.log ('loading preview window!') ; console.log (that.msg, this)}, / / callback previewOpenCallback () {console.log before the preview window opens ('the preview window has been loaded, the preview is open!') }, / / Preview the callback beforeOpenCallback () {console.log ('before printing!') when the preview window opens }, / / callback openCallback () {console.log ('print!') before printing }, / / call callback closeCallback () {console.log ('close the print tool!') when printing }, / / close the printed callback (unable to confirm or cancellation) clickMounted () {console.log ('Click the v-print binding button!') }, / / url: 'http://localhost:8080/', / / print the specified URL Make sure that the same origin policy is the same / / asyncUrl (reslove) {/ / setTimeout (() = > {/ / reslove ('http://localhost:8080/') / /}, 2000) / /}, standard:', extarCss:'}} 5. Note

This in the Callback function points to the current print object object, and that returns the Vue object.

You do not need a header and footer to deselect from the more settings on the print pop-up page.

Do not set the popTitle parameter header title to undifined

When the popTitle parameter is empty, the header title defaults to Document Title.

Supplement: the solution to the blank page

Sometimes the page looks normal, the print preview has one more blank page, the reason is the margin problem, there is no content to the naked eye, there is actually a blank space.

For example, the code goes like this:

Words

Text 123

There is no content at the end, but there is an extra blank page:

The most reliable way to find

@ media print {/ * outermost print node * / # printTest {display:block; height: auto; overflow: hidden;}}

The outer margin of the print node is set to 0

The element is set to 100% width and height, and 100% after inheritance. If you find and cancel the 100% setting, and if the project structure is complex and difficult to find, set a fixed height for the print node. The print generally has a fixed size such as A4 paper (210mm × 297mm), so it doesn't matter if you fix the width and height. Media query, using style only when printing:

/ / print media query @ media print {# printTest {margin:0; height: 266.5mm role / when using the default header and footer, the content of a single page is about the length, multiplied by multiple times}}

In the above method, if you just occupy one page, (standard box) add a border will add one more page blank, including the border, internal and external margins, as long as the content exceeds the height of the page, it will open another page.

If the overflow (such as 1px borders, text) is not enough to display to the next page but still appears on the previous page, or if the overflow (such as margins) is not displayed, a blank page is displayed.

Thank you for reading, the above is the content of "VUE how to use vue-print-nb to achieve print function". After the study of this article, I believe you have a deeper understanding of how VUE uses vue-print-nb to achieve printing function, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.