需求是打印指定div实现小票打印功能。调用浏览器的自带打印功能只能实现打印可视区域，所以这里采用截图+新窗口打开打印去实现此需求。
1.安装html2canvas库实现截图功能
npm install html2canvas --save
2.在需要进行截图和打印的组件中，引入html2canvas库
import html2canvas from'html2canvas';
3.实现截图打印功能
- 需要给打印元素添加id为targetDiv
<div id="targetDiv"></div>
- 截图div获取base64图片
// 打印当前sheetprintDiv(){const div = document.getElementById('targetDiv');// 通过id获取目标divhtml2canvas(div).then((canvas)=>{const base64 = canvas.toDataURL();// 将canvas转换为base64图片this.printMethods(base64);// 调用打印方法});}
- 书写打印方法
printMethods(base64){const printWindow = window.open('','_blank');// 打开一个新的空白窗口
printWindow.document.write(`
<html>
<head><title>打印</title></head>
<style type="text/css">
@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; }
}
}
</style>
<img style="width:100%;height:auto;margin:0px auto;" src="${base64}">
</html>`);
printWindow.document.close();
printWindow.onload=function(){// 图片加载完成后触发打印操作
printWindow.print();// 打印新窗口中的内容
printWindow.onafterprint=function(){// 打印完成后关闭新窗口
printWindow.close();};};}
注意:
1. <head><title>打印</title></head>
这里是新窗口的页面标题
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; }
}
}
这一块是设置打印纸的大小 我这里是根据我元素的大小来设置的，可跟具体需求改写
本文转载自: https://blog.csdn.net/misschengispink/article/details/133857551
版权归原作者 果粒橙er 所有， 如有侵权，请联系我们删除。
版权归原作者 果粒橙er 所有， 如有侵权，请联系我们删除。