vue前端实现打印功能并约束纸张大小---调用浏览器打印功能打印页面部分元素并固定纸张大小
需求是打印指定div实现小票打印功能。调用浏览器的自带打印功能只能实现打印可视区域,所以这里采用截图+新窗口打开打印去实现此需求。
(图片来源网络,侵删)
1.安装html2canvas库实现截图功能
npm install html2canvas --save
2.在需要进行截图和打印的组件中,引入html2canvas库
import html2canvas from 'html2canvas';
3.实现截图打印功能
- 需要给打印元素添加id为targetDiv
- 截图div获取base64图片
// 打印当前sheet printDiv() { const div = document.getElementById('targetDiv'); // 通过id获取目标div html2canvas(div).then((canvas) => { const base64 = canvas.toDataURL(); // 将canvas转换为base64图片 this.printMethods(base64); // 调用打印方法 }); }
- 书写打印方法
printMethods(base64) { const printWindow = window.open('', '_blank'); // 打开一个新的空白窗口 printWindow.document.write(` 打印 @media print { @page { size: auto; margin: 1mm; /* 影响打印的边缘margin */ table { page-break-after: auto; } tr { page-break-inside: avoid; page-break-after: auto; } td { page-break-inside: avoid; page-break-after: auto; } thead { display: table-header-group; } tfoot { display: table-footer-group; } } }
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...