html2canvas jspdf导出pdf 格式文件（vue）

安装html2canvas jspdf包

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

使用

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

// 有底部边距
// ele:any 需要到处的dom元素 pdfName:any导出文件名称
export const downloadPDF1 = (ele:any, pdfName:any) => {
  const dom = ele;
  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 as any).scale(2, 2);
  (context as any).translate(-eleOffsetLeft - abs, -eleOffsetTop);
  html2canvas(dom, {
    useCORS: true, // 解决网络图片跨域问题
    allowTaint: false,
    logging: true,
    dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍
    scale: 4, // 按比例增加分辨率
  } as any).then((canvas:any) => {
    // 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;

    while (renderedHeight < canvas.height) {
      const page = document.createElement('canvas');
      page.width = canvas.width;
      page.height = Math.min(imgHeight, canvas.height - renderedHeight);// 可能内容不足一页

      // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
      (page as any).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(10);

      // // 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);
      // pdf.text(str, 100, pageHeight - 10);
      renderedHeight += imgHeight;
      if (renderedHeight < canvas.height) {
        pdf.addPage();// 如果后面还有内容，添加一个空页
      }
      // 预览pdf(这里我用的是事件总线把canvas传递过去展示，达到模拟pdf预览的效果，有用但效果不是很好，有需要的可以自行修改)
      // this$EventBus.$emit('open-pdf', canvas);
    }
    // 保存文件
    pdf.save(`${pdfName}.pdf`);
  });
}