当前位置: 首页 > Web前端 > vue.js

vueprintvue-print.js打印多页,打印预览样式修改

时间:2023-03-31 18:26:46 vue.js

暂时受这个苦,看樱花vue项目使用print.js打印,解决多页,分页,打印预览样式修改,等问题。引入并安装vue-print.jscnpmivue-printjs--save-dev解决打印多页时只有一页的问题由于打印插件的问题,如果打印文件超过一页,只有一页会显示,所以我们需要修改print.js的源文件,所以只能手动下载vue-print.js到本地,做一些修改,然后引入到项目中,不能使用npm安装下载print.jshttps://github.com/zxc19890923/print/blob/master/print.js在src目录下创建plugins/print/Print.js文件保存插件内容修改print.js//搜索getStyle方法,添加:str+="";getStyle:function(){varstr="",styles=document.querySelectorAll('style,link');for(vari=0;i"+(this.options.noPrint?this.options.noPrint:'.no-print')+"{display:none;}";str+="";返回海峡;},main.js引入插件...importPrintfrom'./plugins/print/Print'Vue.use(Print)在vue文件中使用这个是需要显示的内容打印出来供用户查看。

这里是需要打印的内容,出现在打印预览界面。这里的样式需要写在@mediaprint{}需要的话设置预览页规则,页脚等样式@page{}不需要打印的内容
不要打印我
打印
...最后1、为了打印全部,手动下载插件修改。2、打印内容样式需要写在@mediaprint{}3、this.$print(),打印内容可以通过css和js控制。