首先,我们需要将要打印的内容按照需要进行分页。可以使用CSS的@media print媒体查询来实现分页效果。我们可以通过设置page-break-before或page-break-after属性来控制内容在打印时的分页。 <template> <!-- 第一页的内容 --> <!-- 页面内容 --> <!-- 第二页的内容 --> <!-- 页面内容 --> </...
let id = document.getElementById('container'); printJS({ printable:id, type:'html', style: 'table{font-size:12px; width:1080px; font-family:宋体} .titleInfo td{border-top: 2px solid #000; font-size:16px} .titleInfo .voucherDesc{ border-left: 2px solid #000;} .titleInfo .cAmt...
document.querySelector('#printJS-HTML').style.display = 'nOne' } 这里.paging{page-break-after: always;}样式就是控制分页的关键。 2.打印图片 打印图片的话可以使用上面第一种Html的方式,但更推荐使用Print.js提供的"image"打印类型 printJS({ printable: ['第一张图片Url','第二张图片Url','第三张...
1.先贴出print.js // 打印类属性、方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) === "string") { this....
解决方法是给图片设置了一个"height: 100vh;"让图片的高度等于视图高度,如果要分页打印的话就不能用这个配置。 consturl=图片base64printJS({printable:url,type:'image',documentTitle:'',header:null,base64:true,style:`@media print { @page {size: auto; margin: 0; } body{margin:0; padding: 0;...
<el-button @click="print">打印</el-button> css分页处理: page-break-after:always;查看CSS page-break-after 属性 2、js print(){ let htmlStr = document.getElementById('printMe'); let newWin = window.open(""); //新打开一个空窗口 ...
本文主要介绍了vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题。 引入安装vue-print.js cnpmivue-printjs--save-dev AI代码助手复制代码 解决打印多页只出现一页问题 由于打印插件存在问题,如果打印文件超出一页,只显示一页,所以我们需要修改print.js源文件,所以只能手动下载vue-print.js到本地...
一、使用CSS进行分页 使用CSS进行分页是最简单的方法,通过CSS的分页属性可以控制打印时的分页效果。具体步骤如下: 定义分页样式: @media print { .page-break { page-break-before: always; } } 在需要分页的地方添加class: 这种方法的优点是简单易用,不需要额外...
Vue使用printjs组件打印页面 新需求: 需要将页面的局部信息打印出来,只在前端实现,不要占用后端的资源。 经过一通百度,决定使用print-js和html2canvas组件。 1、npm下载组件 笔者这里使用npm,如果npm下载失败,则尝试使用cnpm 代码语言:javascript 复制 npm install print-js--save ...
最近项目中碰到一个需求,需要前端预览打印当前页面的表格,而且表格是动态渲染的,所以在打印的时候需要分页打印。 1.下载print.js文件到本地 可以直接粘贴下面代码 const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'no...