使用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的名称
    });
  }
相关推荐
!win !13 分钟前
分享二个实用正则
javascript·正则表达式
xw513 分钟前
分享二个实用正则
javascript·正则表达式
刘新明198922 分钟前
算法还原案例4-OLLVM_MD5
开发语言·前端·javascript·1024程序员节
诚实可靠王大锤33 分钟前
react-native实现多列表左右滑动+滚动TabBar悬停
javascript·react native·react.js·1024程序员节
疯狂的沙粒1 小时前
前端开发【工具函数】基于dayjs 封装的DateUtils工具函数,可以直接拿着使用
前端·javascript·vue.js·1024程序员节
jingling5551 小时前
CSS进阶 | 不用一行JS!用纯CSS打造会动的现代化单页应用(3D翻转卡片)
前端·javascript·css
你的电影很有趣1 小时前
lesson76:Vue.js 核心特性详解:事件处理、计算属性与侦听器
javascript·vue·1024程序员节
重铸码农荣光3 小时前
JavaScript 变量声明:从 var 到 let/const 的进化与深思
javascript
hweiyu003 小时前
Node.js+Koa2+MySQL 打造前后端分离项目(视频教程)
数据库·mysql·node.js
小奶包他干奶奶3 小时前
如何使用vscode和express开发node.js
前端·node.js