在Vue项目中使用Print.js进行打印时,如果遇到字体样式丢失的问题,可以尝试以下几种方法来解决: 1. 确认Vue项目中Print.js的正确使用方式 首先,确保你已经正确引入了Print.js并在Vue组件中正确调用。以下是一个基本的使用示例: javascript import printJS from 'print-js'; methods: { printPage() { printJS({ ...
使用jspdf将需要打印的div转成pdf(转成的pdf样式不会丢失,因为pdf.js是将div转成canvas) 安装jspdf npm install --save html2canvas npm install jspdf --save 上代码 utli.js 直接复制,注意outPutPdf方法入参即可 importhtml2canvasfrom'html2canvas';importjsPDFfrom'jspdf';// base64转blobexportfunctiont...
https://blog.csdn.net/admin11196/article/details/116168923 这个连接下的有个园有回答的,我整合到代码中了,亲测好用~真香哈哈 constPrint =function(dom, options) {if(!(thisinstanceof Print))returnnewPrint(dom, options);this.options =this.extend({ noPrint:'.no-print', onStart: function() {},...
一、使用window.print()打印 ,打开一个新窗口,实现多页打印效果,但样式会丢失,只能内嵌样式; 1、template 第一页 第二页 <el-button @click="print">打印</el-button> css分页处理: page-break-after:always;查看CSS page-break-after 属性 2、js print(){ let htmlStr = document.getElementById('pr...
1、看是否样式问题 在查看Print.js 文档后发现,TA可以自己设置样式。然后我就以为是没有设置打印样式问题而导致的。 Print({ printable: 'print-box', type: 'html', documentTitle: '文档标题', header: '统计图', headerStyle: 'font-weight:400;text-align:center;', style: '@page {margin: 0 10mm...
js代码,点击打印后执行(如果右键点击打印就会乱,所以给一个打印预览按钮让用户直接点):打印前先给要打印区域排版,这样预览打印的时候就不会乱,只打印要打印的内容。然后延迟调用系统的打印预览后即便用户没有打印,页面已经排好版了 这个时候右键打印也是可以的了。
1、用的是vue.js vue-print.js2、打印的html,我是直接通过js来拼接的字符串,因为vue-print插件要求是object(DOM),就另外创建了一个div,然后将字符串给这个div,再获取这个div的html。 尝试过的方法:1、直接改table的宽度,发现默认情况下,table的最大宽度设置成1175px就可以正常打印,再大右边就会缺失。但是这样...
new Vue({ el: '#app', data() { return { dialog: false } }, methods: { print() { var prtContent = document.getElementById("print"); var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0'); WinPrint.document.write(prtContent...
方法二,源码就一个print.js文件,在项目目录中,随时都可以看到,随时可以修改调试,简单方便。并且代码还少哦。 3、使用时的BUG 方法一,存在跨域的BUG,就是link里边的样式路径必须是相对路径或者与站点同域,否则会垮掉。(这个问题在当时反馈给了作者,并提供了解决方案,作者2019年9月应该已经修复) ...