【项目问题】前端如何实现打印和导出的功能？

一、前言

打印需要用到的工具是 print-js。
导出需要用到的工具是 jspdf。

二、准备工作

第一步：引入print-js 和 jspdf

npm i print-js
npm i jspdf

第二步：创建一个打印页面的组件
ng 是 angular/cli 脚手架快捷命令

ng g c pages/print

第三步：设计页面

<div id="print">
    <p>print content</p>
</div>
<br>
<button (click)="print()">打印</button>
<button (click)="export()">导出</button>

三、打印步骤

1：创建css文件，设计最终打印的样式
assets/style/print.css

#print{
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px;
    height: 200px;
    border: 1px black dotted;
}

2：引入print-js，实现打印

import * as printJS from 'print-js';
print(){
    printJS({
      printable: document.getElementById("print"), //打印的节点
      type: "html", //打印类型，html,json,image
      css: '/assets/style/print.css', //打印css
      scanStyles: true //是否获取html的样式
    })
  }

效果：

四、导出步骤

1：引入html2Canvas 和 JsPDF

import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';

2：实现导出

export() {
    var printDom = document.getElementById('print');//获取打印的节点
    let opts: any = {
      useCORS: true, // 表示允许跨越的图片；allowTaint: true和useCORS: true选择一个
      // windowHeight: modal.scrollHeight + 24 + 100,//获取y方向页面包含滚动条的高度，24和100为padding,margin
      // width: dom.offsetWidth + 48,//48为padding值
      // height: dom.clientHeight + 400,//可见高度+padding+margin
      // y: window.pageYOffset + 100,//滚动条高度修复
      // scrollX: 17,
      scale: 1
    };
    //html2Canvas的作用是根据dom生成屏幕截图
    html2Canvas(printDom, opts).then(canvas => {
      let contentWidth = canvas.width;
      let contentHeight = canvas.height;
      let pageHeight = contentWidth / 592.28 * 841.89;
      let leftHeight = contentHeight;
      let position = 0;
      let imgWidth = 595.28;
      let imgHeight = 592.28 / contentWidth * contentHeight;
      let pageData = canvas.toDataURL('image/jpeg', 1.0);
      // landscape表示横向,portrait表示纵向
      let PDF = new JsPDF('portrait', 'pt', 'a4');//纵向
      if (leftHeight < pageHeight) {
        PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
      } else {
        while (leftHeight > 0) {
          PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          if (leftHeight > 0) {
            PDF.addPage();
          }
        }
      }
      PDF.save(`导出内容.pdf`);
    })
  }

效果：