使用pdfmake导出pdf文件

package配置pdfmake html2canvas,然后npm安装

javascript 复制代码
"pdfmake": "0.2.10",
"html2canvas": "1.4.1",

使用如下,

html里面组件加个id为exportPdf

然后调用下面的方法即可

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

javascript 复制代码
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的名称
    });
  }
相关推荐
睡美人的小仙女1272 小时前
在 Vue 前端(Vue2/Vue3 通用)载入 JSON 格式的动图
前端·javascript·vue.js
大宝贱2 小时前
H5小游戏-超级马里奥
javascript·css·html·h5游戏·超级马里奥
一个很帅的帅哥3 小时前
《深入浅出 Node.js》分享精简大纲
node.js
weixin_490354345 小时前
Vue设计与实现
前端·javascript·vue.js
GISer_Jing5 小时前
React过渡更新:优化渲染性能的秘密
javascript·react.js·ecmascript
烛阴6 小时前
带你用TS彻底搞懂ECS架构模式
前端·javascript·typescript
wayhome在哪6 小时前
3 分钟上手!用 WebAssembly 优化前端图片处理性能(附完整代码)
javascript·性能优化·webassembly
web前端1237 小时前
# 多行文本溢出实现方法
前端·javascript
人间观察员7 小时前
如何在 Vue 项目的 template 中使用 JSX
前端·javascript·vue.js
EndingCoder7 小时前
安装与环境搭建:准备你的 Electron 开发环境
前端·javascript·electron·前端框架