使用打印选项:在调用window.print()方法时,可以使用第二个参数来设置打印选项,包括页眉和页脚的内容。可以使用@page规则中的@top-center、@top-right、@bottom-center、@bottom-right规则来设置页眉和页脚的内容。例如,可以在打印按钮的点击事件中添加以下代码来设置页眉和页脚的内容: printPage() { // 调整页面的大...
Print({ printable: 'print-box', type: 'html', documentTitle: '文档标题', header: '统计图', headerStyle: 'font-weight:400;text-align:center;', style: '@page {margin: 0 10mm};', // 不打印页眉和页脚 honorColor: true, // 是否打印彩色文本 targetStyles: ['*'] // 允许打印所有样式...
Print({printable:'print-box',type:'html',documentTitle:'文档标题',header:'统计图',headerStyle:'font-weight:400;text-align:center;',style:'@page {margin: 0 10mm};',// 不打印页眉和页脚honorColor:true,// 是否打印彩色文本targetStyles:['*']// 允许打印所有样式属性}) 重新设置后在打印,发现...
printJS('https://example.com/image.jpg', 'image'); 打印PDF:可以打印PDF文件。 printJS('https://example.com/file.pdf'); 六、总结和进一步建议 在Vue中使用print.js非常简单,只需要几个步骤即可完成。首先,通过npm或yarn安装print.js库;其次,在Vue组件中引入print.js;最后,创建一个方法来调用printJS函...
由于window.print是1:1打印,打印内容过宽时,浏览器会自动从左截取掉超宽部分,因此在打印前需将页面进行调整 打印页边距设定为 0mm 时,网页内最大元素的分辨率:794×1123 因此我将内容div设置为700px,剩余空间设置为页边距 页眉页脚问题 由于window.print打印自带页眉页脚,用于存放打印url,日期时间,页面名称等内容...
header和footer:指定打印时的页眉和页脚内容。 其他参数如ignoreCSS、scanStyles等,可以根据需要进行配置。 5. 触发打印操作 当你点击“打印页面”按钮时,将触发printPage方法,并调用print-js插件进行打印操作。此时,浏览器将弹出打印对话框,你可以按照提示完成打印。 注意事项 确保要打印的元素在DOM中存在,并且具有唯一...
footer: '打印页脚' // 打印页脚 }) } } } 在上面的示例中,我们定义了一个按钮,当点击按钮时,调用print方法。在print方法中,我们使用printJS函数来执行打印操作。printJS函数接受一个配置对象作为参数,其中包含要打印的元素的ID或选择器,打印内容的类型,以及可选的页眉和页脚。 4. 在需要打印的元素中添加ID...
Print.js 官方文档:https://printjs.crabbly.com/ 重点:多页打印 经过读文档,print.js 有个功能是打印JSON。所以我们在打印JSON 的时候,只需要调接口拿到所有的数据,然后在打印就可以了。 import printJS from "print
在使用vue-print-nb的过程中,可能会遇到一些小问题,但别担心,我们有办法解决😜! 1. 页眉页脚字符串问题🚩 打印预览时可能会出现页码、网址等 undefined 之类的字符。可以通过设置样式来解决,优点是简单直接,缺点是页面上下边距会消失。可以在打印媒体查询中添加如下样式,将页边距设置为 3mm 来隐藏页眉页脚: ...
print() { this.$print(this.$refs.printArea); } } } 二、vue-html-to-paper vue-html-to-paper 是另一个流行的打印插件,支持多种配置选项,适用于更复杂的打印需求。其主要特点包括: 自定义打印选项:如页眉、页脚、页面方向等。 多页面支持