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

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

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

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

npm install html2canvas --save

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

javascript">import html2canvas from 'html2canvas';

3.实现截图打印功能

  1. 需要给打印元素添加id为targetDiv
<div id="targetDiv"></div>
  1. 截图div获取base64图片
    // 打印当前sheet
    printDiv() {
      const div = document.getElementById('targetDiv'); // 通过id获取目标div
      html2canvas(div).then((canvas) => {
        const base64 = canvas.toDataURL(); // 将canvas转换为base64图片
        this.printMethods(base64); // 调用打印方法
      });
    }
  1. 书写打印方法
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; }
        }
      }
    这一块是设置打印纸的大小 我这里是根据我元素的大小来设置的,可跟具体需求改写
转载请说明出处内容投诉
CSS教程_站长资源网 » vue前端实现打印功能并约束纸张大小---调用浏览器打印功能打印页面部分元素并固定纸张大小

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买