在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); }...
<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.append(htmlStr); // 打印内容 newWi...
main.js中引入插件 ...importPrintfrom'./plugins/print/Print'Vue.use(Print) AI代码助手复制代码 vue文件中的使用 这是展示的需要打印的内容,给用户看的。这里是需要打印的内容,出现在打印预览的界面,这里的样式需要写在 @media print {}里面 如果需要设置预览页规则,页脚等样式 @page {}不需要打印的内容不...
Print.js 官方文档:https://printjs.crabbly.com/ 重点:多页打印 经过读文档,print.js 有个功能是打印JSON。所以我们在打印JSON 的时候,只需要调接口拿到所有的数据,然后在打印就可以了。 import printJS from "print-js"; 代码如下: // loading
Print.js有四种打印类型:'pdf'、'html'、'image'、'json'。 它的基本用法是调用printJS()并传入参数 //pdf打印 传入PDF文档url printJS('docs/PrintJS.pdf') //图片打印 传入图片url,第二个参数:'image' printJS('images/PrintJS.jpg', 'image') ...
最近项目中碰到一个需求,需要前端预览打印当前页面的表格,而且表格是动态渲染的,所以在打印的时候需要分页打印。 1.下载print.js文件到本地 可以直接粘贴下面代码 const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'no...
vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题。 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页只出现一页问题 由于打印插件存在问题,如果打印文件超出一页,只显示一页,所以我们需要修改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 ...