前端网页打印成PDF（ JSX TSX 页面打印）

关于前端页面的打印成PDF，有不同的方法。

1. window有一个自带的print（）,window.print() 。
   （1）这个方法比较简单明了， 调用方法，就会打印出body里面的内容，这种方法根据弹窗，可以自主选择是否添加页眉页脚，横屏竖屏等功能，比较灵活。
   （2）同时，根据项目，有可能需要在打印的时候显示或隐藏某些内容，或者在打印的时候修改样式等，此刻需要： @media print {} 把需要打印的时候出现的特殊样式，写到这个函数里面，即可在打印的时候起作用，在页面显示的时候不会有效果。
   (3) 可以搭配Window matchMedia() 方法，来捕获打印这一个动作， 可以进行一些比如打印之前或者之后的一些操作，matchMedia()返回一个新的媒体查询对象，
   if (window.matchMedia("(max-width: 900px)").matches) {
   /* 窗口小于或等于 900 像素 */
   } else {
   /*窗口大于 900 像素 */
   }
   addListener(functionref)添加一个监听函数，在执行监听函数监听的操作的时候，会触发某些改变，
   if (window.matchMedia) { var mediaQueryList = window.matchMedia('print'); //页面的打印添加监听事件 mediaQueryList.addListener(function(mql) { if (mql.matches) { //打印之前可以自主的进行一些操作 } else { //打印之后可以自主的进行一些操作 } }); }
2. jsPDF 和 html2canvas 搭配使用打印页面，这种方法，也更灵活， 可以挑选自己想要打印的部分，也可以加入自己的一些想法。这种方法需要加入水印的时候，个人没有找到更好的办法，我个人是根据分页部分，给元素设置的背景颜色，这种方法其实有弊端，当不同的设备打印的时候，会因为设备不同，页面显示不同，分页部分也不同， 需要自己去做分页地方的不同设备的兼容。

 const downloadPdf = () => {
 	// jsPDF 的第一个参数， p代表竖屏，l 代表横屏
    var pdf = new jsPDF('p', 'pt', 'letter'); 

    pdf.canvas.height = 72 * 11; 
    pdf.canvas.width = 72 * 8.5; 
    
	//需要打印的内容 ，可以自主选择需要打印的部分
    const dom = document.getElementById('dom')
    setTimeout(() => {
      if (dom) {
        html2canvas(dom).then(function (canvas: { width: any; height: any; toDataURL: (arg0: string, arg1: number) => any; }) {
  
          const contentWidth = canvas.width;
          const contentHeight = canvas.height;
          // 一页pdf显示html页面生成的canvas高度;
          const pageHeight = (contentWidth / 592.28) * 841.89;
          // 未生成pdf的html页面高度
          let leftHeight = contentHeight;
          // 控制页面是否偏移
          let position = 0;
          const imgWidth = 595.28;
          //第一个数字可以控制页面的拉伸，可以在需要的情况下适当修改大小
          const imgHeight = (580 / contentWidth) * contentHeight;
          const pageData = canvas.toDataURL('image/jpeg', 1.0);
           // jsPDF 的第一个参数， p代表竖屏，l 代表横屏
          // eslint-disable-next-line new-cap
          const pdf = new jsPDF('p', 'pt', 'a4');
          // 当内容未超过pdf一页显示的范围，无需分页， 页面内容过长不分页，打印出来的是一个长文档。
          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`);
        });
      }
    }, 0)
  };