jspdf和html2canvas将html内容转 PDF

npm install --save html2canvas
npm i --save jspdf

 方法封装

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

// html转pdf
/**
 * @param  ele          要生成 pdf 的DOM元素（容器）
 * @param  padfName     PDF文件生成后的文件名字
 * */

export function downloadPDF(ele, pdfName) {
  window.scrollTo(0, 0);
  let w = ele.clientWidth; //获取屏幕宽度
  let h = ele.clientHeight; //获取屏幕高度
  let scale = 1;
  //一页pdf显示html页面生成的canvas高度;
  let canvas = document.createElement('canvas');
  canvas.width = w * scale;
  canvas.height = h * scale;
  canvas.style.width = w * scale + 'px';
  canvas.style.height = h * scale + 'px';
  canvas.getContext('2d').scale(scale, scale);
  let opt = {
    scale: scale, //添加scale 参数
    canvas: canvas, //自定义canvas
    logging: false,
    width: w, //canvas 宽度
    hieght: h, //canvas 高度
    useCORS: true, //开启跨域
  };

  html2canvas(ele, opt).then((canvas) => {
    var pdf = new JsPDF('p', 'mm', 'a4'); //A4纸，纵向
    var ctx = canvas.getContext('2d'),
      a4w = 190,
      a4h = 274, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
      imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
      renderedHeight = 0;

    while (renderedHeight < canvas.height) {
      var page = document.createElement('canvas');
      page.width = canvas.width;
      page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页 //用getImageData剪裁指定区域，并画到前面创建的canvas对象中

      page
        .getContext('2d')
        .putImageData(
          ctx.getImageData(
            0,
            renderedHeight,
            canvas.width,
            Math.min(imgHeight, canvas.height - renderedHeight),
          ),
          0,
          0,
        );
      pdf.addImage(
        page.toDataURL('image/jpeg', 1.0),
        'JPEG',
        10,
        10,
        a4w,
        Math.min(a4h, (a4w * page.height) / page.width),
      ); //添加图像到页面，保留10mm边距
      renderedHeight += imgHeight;
      if (renderedHeight < canvas.height) {
        pdf.addPage(); //如果后面还有内容，添加一个空页
      }
    }
    //可动态生成
    pdf.save(pdfName);
  });
}

使用

import { downloadPDF, guid } from '@/utils';


//导出
  const handleExport = () => {
    downloadPDF(document.querySelector('#demo>div'), 'test');
  };


return (
     <Button type="primary" icon={<DownloadOutlined />} onClick={handleExport}>
                导出报告
    </Button>
)