深圳营销型网站建设公司,做购物网站步骤,名片制作app软件,有自己网站好处需求是打印指定div实现小票打印功能。调用浏览器的自带打印功能只能实现打印可视区域#xff0c;所以这里采用截图新窗口打开打印去实现此需求。 1.安装html2canvas库实现截图功能
npm install html2canvas --save2.在需要进行截图和打印的组件中#xff0c;引入html2canvas… 需求是打印指定div实现小票打印功能。调用浏览器的自带打印功能只能实现打印可视区域所以这里采用截图新窗口打开打印去实现此需求。 1.安装html2canvas库实现截图功能
npm install html2canvas --save2.在需要进行截图和打印的组件中引入html2canvas库
import html2canvas from html2canvas;3.实现截图打印功能
需要给打印元素添加id为targetDiv
div idtargetDiv/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(htmlheadtitle打印/title/headstyle typetext/cssmedia 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; }}}/styleimg stylewidth:100%;height:auto;margin:0px auto; src${base64}/html);printWindow.document.close();printWindow.onload function () {// 图片加载完成后触发打印操作printWindow.print(); // 打印新窗口中的内容printWindow.onafterprint function () {// 打印完成后关闭新窗口printWindow.close();};};}注意:
1. headtitle打印/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; }}}这一块是设置打印纸的大小 我这里是根据我元素的大小来设置的可跟具体需求改写
