使用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的名称
    });
  }
相关推荐
杨荧3 分钟前
基于大数据的美食视频播放数据可视化系统 Python+Django+Vue.js
大数据·前端·javascript·vue.js·spring boot·后端·python
WordPress学习笔记16 分钟前
根据浏览器语言判断wordpress访问不同语言的站点
前端·javascript·html
鲸落落丶31 分钟前
JavaScript构建工具
javascript
red润4 小时前
let obj = { foo: 1 };为什么Reflect.get(obj, ‘foo‘, { foo: 2 }); // 输出 1?
开发语言·javascript·ecmascript
前端领航者5 小时前
重学Vue3《 v-for的key属性:性能差异与最佳实践》
前端·javascript
咕噜分发企业签名APP加固彭于晏6 小时前
白嫖价值千元的EO
前端·javascript
前端开发爱好者6 小时前
首个「完整级」WebSocket 调试神器来了!
前端·javascript·vue.js
前端Hardy6 小时前
HTML&CSS&JS:高颜值登录注册页面—建议收藏
前端·javascript·css
白雾茫茫丶6 小时前
如何动态执行 JS 脚本
javascript
yede7 小时前
页面中模块通讯简单实现
前端·javascript·html