vue前端实现打印功能并约束纸张大小—调用浏览器打印功能打印页面部分元素并固定纸张大小

需求是打印指定div实现小票打印功能。调用浏览器的自带打印功能只能实现打印可视区域，所以这里采用截图+新窗口打开打印去实现此需求。

1.安装html2canvas库实现截图功能

npm install html2canvas --save

2.在需要进行截图和打印的组件中，引入html2canvas库

import html2canvas from 'html2canvas';

3.实现截图打印功能

1. 需要给打印元素添加id为targetDiv

<div id="targetDiv"></div>

2. 截图div获取base64图片

// 打印当前sheetprintDiv() {const div = document.getElementById('targetDiv'); // 通过id获取目标divhtml2canvas(div).then((canvas) => {const base64 = canvas.toDataURL(); // 将canvas转换为base64图片this.printMethods(base64); // 调用打印方法});}

3. 书写打印方法

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; }}} <img class="aligncenter" src="https://img.maxssl.com/uploads/?url=${base64}">`);printWindow.document.close();printWindow.onload = function () {// 图片加载完成后触发打印操作printWindow.print(); // 打印新窗口中的内容printWindow.onafterprint = function () {// 打印完成后关闭新窗口printWindow.close();};};}

注意:

1. 这里是新窗口的页面标题2.@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; }}}这一块是设置打印纸的大小 我这里是根据我元素的大小来设置的，可跟具体需求改写