html2Canvas + JsPDF实现纯前端pdf导出

import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
import './simhei-normal'
// 有底部边距
// ele需要到处的dom元素 pdfName导出文件名称
export const generatePDF = (ele, pdfName) => {
  const dom = ele;
  console.log(document.querySelector(`.${dom}`, './'));
  window.scrollTo(0, 0);
  const eleW = ele.offsetWidth; // 获得该容器的宽
  const eleH = ele.offsetHeight; // 获得该容器的高
  const eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
  const eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离

  const canvas = document.createElement('canvas');
  let abs = 0;

  const win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
  const win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）

  if (win_out > win_in) {
    // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
    abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半
  }
  canvas.width = eleW * 2; // 将画布宽&&高放大两倍
  canvas.height = eleH * 2;

  const context = canvas.getContext('2d');
  (context).scale(2, 2);
  (context).translate(-eleOffsetLeft - abs, -eleOffsetTop);
  html2Canvas(document.querySelector(`.${dom}`), {
    useCORS: true, // 解决网络图片跨域问题
    allowTaint: false,
    logging: true,
    dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍
    scale: 4, // 按比例增加分辨率
  }).then((canvas) => {
    // eslint-disable-next-line new-cap
    const pdf = new JsPDF('p', 'pt', 'a4'); // A4纸，纵向
    const ctx = canvas.getContext('2d');
    const a4w = 563.28; const a4h = 819.89; // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
    const imgHeight = Math.floor(a4h * canvas.width / a4w); // 按A4显示比例换算一页图像的像素高度
    let renderedHeight = 0;
    const pageCount = Math.ceil(canvas.height / imgHeight); //计算总页数

    while (renderedHeight < canvas.height) {
      const 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', 16, 16, a4w, Math.min(a4h, a4w * page.height / page.width)); // 添加图像到页面，保留10mm边距
      const str = `${pdf.getNumberOfPages()}`;
      pdf.setFontSize(12)
      pdf.setFont('simhei')
      // // jsPDF 1.4+ uses getWidth, <1.4 uses .width
      // const pageSize = pdf.internal.pageSize;
      // const pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
      // pdf.text('Footer text', 0, pageHeight - 10);
      // console.log(str,'/');
      // pdf.rect(250, 0, 100, 20, 'F');
      // pdf.text(250, 40, `审 计 取 证 单`);
      // pdf.text(500, 40, `第${str}页（共${pageCount}页）`);
      renderedHeight += imgHeight;
      if (renderedHeight < canvas.height) {
        pdf.addPage();// 如果后面还有内容，添加一个空页
      }
      // 预览pdf(这里我用的是事件总线把canvas传递过去展示，达到模拟pdf预览的效果，有用但效果不是很好，有需要的可以自行修改)
      // this$EventBus.$emit('open-pdf', canvas);
    }
    // 保存文件
    pdf.save(`${pdfName}.pdf`);
    return true
  });
}