首先,我们需要将要打印的内容按照需要进行分页。可以使用CSS的@media print媒体查询来实现分页效果。我们可以通过设置page-break-before或page-break-after属性来控制内容在打印时的分页。 <template> <!-- 第一页的内容 --> <!-- 页面内容 --> <!-- 第二页的内容 --> <!-- 页面内容 --> </...
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); }...
经过读文档,print.js 有个功能是打印JSON。所以我们在打印JSON 的时候,只需要调接口拿到所有的数据,然后在打印就可以了。 import printJS from "print-js"; 代码如下: // loading const printLoading =this.$loading({ lock:true, text:'打印页面生成中', spinner:'el-icon-loading', background:'rgba(0,...
}// 不打印方法1. 添加no-print样式类// 不打印方法2. this.$print(this.$refs.print,{'no-print':'.do-not-print-div'})} AI代码助手复制代码 最后 1、为了打印全部,手动下载插件并修改。 2、打印内容样式需要写在 @media print {}中 3、this.$print(),不需要打印内容可以通过css,js两种方法控制。
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); // 打印内容 ...
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 ...
解决方法是给图片设置了一个"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;...
一、使用CSS进行分页 使用CSS进行分页是最简单的方法,通过CSS的分页属性可以控制打印时的分页效果。具体步骤如下: 定义分页样式: @media print { .page-break { page-break-before: always; } } 在需要分页的地方添加class: 这种方法的优点是简单易用,不需要额外...