在Vue中实现多页打印可以通过使用window.print()方法来触发浏览器的打印功能。但是,如果需要打印多页内容,我们需要进行一些额外的处理。 首先,我们需要将要打印的内容按照需要进行分页。可以使用CSS的@media print媒体查询来实现分页效果。我们可以通过设置page-break-before或page-break-after属性来控制内容在打印时的分页。
1.先贴出print.js // 打印类属性、方法定义/* eslint-disable */constPrint=function(dom, options) {if(!(thisinstanceofPrint))returnnewPrint(dom, options);this.options=this.extend({'noPrint':'.no-print'}, options);if((typeofdom) ==="string") {this.dom=document.querySelector(dom); }...
1、template 第一页 第二页 <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(""); //新打开一个空窗口 newWin.document.body.appen...
经过读文档,print.js 有个功能是打印JSON。所以我们在打印JSON 的时候,只需要调接口拿到所有的数据,然后在打印就可以了。 import printJS from "print-js"; 代码如下: // loading const printLoading =this.$loading({ lock:true, text:'打印页面生成中', spinner:'el-icon-loading', background:'rgba(0,...
本文主要介绍了vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题。 引入安装vue-print.js cnpmivue-printjs--save-dev AI代码助手复制代码 解决打印多页只出现一页问题 由于打印插件存在问题,如果打印文件超出一页,只显示一页,所以我们需要修改print.js源文件,所以只能手动下载vue-print.js到本地...
document.querySelector('#printJS-HTML').style.display = 'none' } 这里.paging{page-break-after: always;}样式就是控制分页的关键。 2.打印图片 打印图片的话可以使用上面第一种Html的方式,但更推荐使用Print.js提供的"image"打印类型 printJS({ ...
最近项目中碰到一个需求,需要前端预览打印当前页面的表格,而且表格是动态渲染的,所以在打印的时候需要分页打印。 1.下载print.js文件到本地 可以直接粘贴下面代码 const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'no...
Vue使用printjs组件打印页面 新需求: 需要将页面的局部信息打印出来,只在前端实现,不要占用后端的资源。 经过一通百度,决定使用print-js和html2canvas组件。 1、npm下载组件 笔者这里使用npm,如果npm下载失败,则尝试使用cnpm 代码语言:javascript 复制 npm install print-js--save ...
一、使用CSS进行分页 使用CSS进行分页是最简单的方法,通过CSS的分页属性可以控制打印时的分页效果。具体步骤如下: 定义分页样式: @media print { .page-break { page-break-before: always; } } 在需要分页的地方添加class: 这种方法的优点是简单易用,不需要额外...
解决方法是给图片设置了一个"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;...