在不影响页面显示的情况下,单一的前端打印页面,使用下面的方法,交互是比较顺畅的,代码撸给大家做参考。解决的问题点如下:
1、纯前端打印页面,并且保证打印的页面数据显示不会被篡改。
2、不影响页面显示,打印前后,页面上不会出现水印。
<template>
<div id="app">
// 需要打印的页面结构用v-if控制
<div v-if="pagesShow" id="pages">
// 打印按钮放在哪里都可以
<el-button type="..." @click="exportPage">打印</el-button>
<div>
......
</div>
</div>
</div>
</template>
<script>
// 加水印的方法很多,百度即可
import getWatermark from "./js配置文件“
// 打印的方法
import getPdf from "./js配置文件"// 建议使用html2canvas+jspdf这两个的组合
export default {
data() {
return {
pagesShow: true, // 控制需要打印的页面结构的刷新
userMessage: "水印内容"
}
},
methods: {
// 导出按钮
exportPage(){