使用pdfmake导出pdf文件

package配置pdfmake html2canvas，然后npm安装

"pdfmake": "0.2.10",
"html2canvas": "1.4.1",

使用如下，
html里面组件加个id为exportPdf
然后调用下面的方法即可

输出的pdf为整个组件的截图

import * as pdfMake from 'pdfmake/build/pdfmake';
import html2canvas from 'html2canvas';

exportPdf() {
    const widthScale = 2;
    const pdfWidth = 600 * widthScale; // pdf宽度
    const cntElem = document.getElementById('exportPdf');// 组件的id
    const width = cntElem.offsetWidth;
    const height = cntElem.scrollHeight;
    const scale = 3; // 数字越大，导出的pdf越清晰
    const opts = {
      scale: scale,
      width: width,
      height: height,
      useCORS: true,
    };

    html2canvas(cntElem, opts).then(canvas => {
      const contents = [];
      contents.push({
        image: canvas.toDataURL('image/jpeg'),
        width: pdfWidth,
      });

      pdfMake
        .createPdf({
          pageSize: {
            width: pdfWidth,
            height: pdfWidth / (width / height), // 按照实际高度比，自定义pdf高度
          },
          pageMargins: [0, 0],
          content: contents,
        })
        .download('11111');//1111是pdf的名称
    });
  }

原文地址：https://blog.csdn.net/wnk1997/article/details/143771109

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！