在想打印一个web页面的时候,会用到window.print()。默认会打印当前document内容,样式/图片还有
里面的html标签.一般我们打印当前页面,不会是整个页面,而只是打印当前页面部分内容而已。一般是写样式,打印之前把不需要打印的标签通过display:none隐藏掉。如果东西不多也可以这样做,但是如果要打印其他页面,还是得重新写一下这样的隐藏完了还得显示回来,有点麻烦。这时候就想,能不能只打印一个组件这个组件里面的内容都是我们要打印的东西。于是有了封装一个打印组件的想法。
思路是这样的,通过一个iframe 把当前需要打印的组件内容给到iframe的body,样式呢,我们就拿当前document里面的样式。因为vue组件用的也是当前页面的样式,当运行npm run dev(npm run serve)的时候,css-loader /style-loader 会把组件的样式打包到document的head标签下页面。
所以就可以这样写 PrintView.vue
export default {
name: "print",
props: {
html: {
type: String,
default: ""
}
},
watch: {
html(val) {
if (val) {
this.setBodyHtml(val);
}
}
},
methods: {
setBodyHtml(html) {
const document = window.document;
const iframe =