In the vue project, the HTML page printing function. In the project, sometimes it is necessary to print the form of the page,
I found a printing component vue-print-nb on the Internet
The source code of this blog: https://github.com/shengbid/vue-print , there is only the code of the printing component, only need this function to download this
https://github.com/shengbid/vue-demo In this project, the code for some functions written in the usual blog is placed in it. You can download it if you need it. If you need help, click a star.
How to use
Install npm install vue-print-nb --save
Register in the main.js file
import Print from 'vue-print-nb'
Vue.use(Print);
Used in the page, add an id to the container that needs to be printed, and the print button passes in this id
html:
<div id="printMe" style="background:red;">
<p>葫芦娃，葫芦娃</p>
<p>一根藤上七朵花 </p>
<p>小小树藤是我家 啦啦啦啦 </p>
<p>叮当当咚咚当当 浇不大</p>
<p> 叮当当咚咚当当 是我家</p>
<p> 啦啦啦啦</p>
<p>...</p>
<div class="describle">
<el-form :model="form" :rules="rules" ref="from" class="demo-ruleForm">
<el-form-item label="姓名:" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="描述:" prop="describle">
<el-input
:disabled="detail"
type="textarea"
:rows="4"
:maxlength="2000"
placeholder=""
v-model="form.describle">
</el-input>
</el-form-item>
</el-form>
</div>
</div>
<button v-print="'#printMe'">Print local range</button>
Click the print button to print the page
I encountered a problem in the process of using this plug-in. The content of the ordinary input tag is no problem. The content of the textarea text field cannot be displayed. I checked the plug-in and found that the author used the value value when assigning the form. This kind of assignment is invalid for some double-label forms and needs to be modified
PS: The author of the new version has fixed this problem, and students who use the new version can ignore it.
This method of directly changing the package is not very good. If other people download your code, you also need to modify the package. Therefore, it is best to take this package out, put it in the file, and directly reference it in main.js
main.js 引用 import Print from '@/utils/vue-print-nb/'
Add
I have recently received a question about how to set the title of the printed page. I tried it myself and found that the previous method was undefined. I went to the official website and checked it. The author modified this component again, and now it has become more configurable.
Note: here, printObj in v-print="printObj" must be consistent with export default --> data-->return-->printObj
Reason: The button can be directly printed by binding v-print directly. The bound printObj is bound to the default data set by yourself, such as: binding the ID of the div of the area to be printed, the title displayed after printing, etc.
Now what is passed in is an object,
When there is a lot of printing content, using vue-print-nb may cause typesetting problems.
Here is a method of first converting into a picture and printing:
<template>
<div>
<div id="printMe" ref="printContent">
<ul class="content">
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
</ul>
</div>
<el-button type="primary" @click="toImg">转图片打印</el-button>
<el-button v-print="printObj" type="primary">直接打印</el-button>
<img style="margin-top:20px;" :src="img" alt="">
</div>
</template>
<script>
import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js
import printJS from 'print-js'
export default {
data() {
return {
img: '',
printObj: {
id: 'printMe',
popTitle: '打印',
extraCss: 'https://www.google.com,https://www.google.com',
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
}
}
},
watch: {
},
created() {
},
methods: {
toImg() { // 转图片打印
html2canvas(this.$refs.printContent, {
backgroundColor: null,
useCORS: true,
windowHeight: document.body.scrollHeight
}).then((canvas) => {
// let url = canvas.toDataURL('image/jpeg', 1.0)
const url = canvas.toDataURL()
this.img = url
printJS({
printable: url,
type: 'image',
documentTitle: '打印图片'
})
console.log(url)
})
}
}
}
</script>
Supplementary content: Because I haven't used it for a while, I haven't encountered some problems with the current version. Recently, I have seen a few questions from bloggers.
I have taken a look at these two days when I have time, and I will attach some of the problems and solutions I have summarized below.There may be more pictures, but I also hope to describe the reason in detail as much as possible instead of just giving a solution.
The related githup source code will also be updated as soon as possible, it is helpful to remember to song star
PS: Because these problems are the original component of the component, modification needs to change the component source code, do not modify it directly under node_modlues, copy this vue-print-nb installation package and put it under your own project file,
There may be no src directory when copying at the beginning, it doesn't matter, it will be automatically generated after running it, after taking it out, you must also modify the import method of mian.js to introduce the tag_textarea.umd file under lib
1. Print one more blank page
Now it is very likely that there will be one more blank page when I use it. I look at the code combined with the information, because the iframe created has elements of height: 100%, and the image in the image is the iframe element generated when printing.
Take a look at the page, because I set HTML: height 100% on this page, you can look at your page, or it may be body 100% or other elements. This print component copies all the css styles you introduced, so Will also inherit the style you set
The solution is to set a height for HTML and override the default 100%
Print again, I added some more content, and there is no more blank page, this height setting will not affect the real height of your printed content, if you actually have two pages, here will be two pages
In this way, printing one more blank page will solve the problem. This method is effective in my test here. It cannot be guaranteed to apply to all scenarios. However, one more blank page is likely to be a problem with element height settings.
2. The callback method does not take effect
The callback method is added in the new version. I tried it myself and it did not take effect. I looked at the code and didn't call the incoming callback method, nor did it return anything. Add it to the code.
Component reference:
Page printing
Correct here and modify the file, because the project I used for testing has translation of es5 grammar, tag_textarea.umd is es5 grammar, it can be used, but I will put it in another vue project and introduce the es5 grammar error,
I am also very grateful to bloggers for their comments and reminders. It is almost misleading. If your project does not support es5 syntax, introduce the files under src, modify the two files of print.js and printarea.js, and you can search for the code in the same way as you change it. My githup on
The code under src is used, you can refer to https://github.com/shengbid/vue-print if necessary ,
3. Hide the content that does not need to be printed
If you do not need to print all the content when printing, you can delete the elements that do not need to be printed before printing, the specific method
A new attribute ignoreClass is added to the print.js file to hide elements that do not need to be printed
Also add in printarea.js, and add a method to remove hidden elements
When the component is used, pass in this element
Printing effect
Remove header and footer
The js or vue-print-nb plug-in will bring the header, footer and time when calling chorme to print.
In chorme, you can manually set whether to print headers and footers. If you don’t want to manually print, you can refer to css control:
css:
@page{
size: auto; /* auto is the initial value */
margin: 3mm; /* this affects the margin in the printer settings */
}