利用html2canvas + jspdf将页面内容生成pdf并且下载

依赖安装

npm install html2canvas
npm install jspdf
1
2

函数调用以及实现（vue）

// 引入
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'

const previewEl = document.getElementById('targetDom')
// 函数调用
this.savePdf(previewEl).then(res => {
})
  // 函数实现
  savePdf(html2canvasDom, downloadName = '下载文件') {
      return html2canvas(html2canvasDom, {
        // width: 1714,
        // height: 200,
        backgroundColor: '#fff',
        useCORS: true, // 解决文件跨域问题
        scale: window.devicePixelRatio * 2, // 按比例增加分辨率
        dpi: 300
      })
        .then(canvas => {
          const a4Width = 595.28
          const a4Height = 841.89
          // 可以上传后端或者直接显示
          // 用于将canvas对象转换为base64位编码
          var context = canvas.getContext('2d')
          context.mozImageSmoothingEnabled = false
          context.webkitImageSmoothingEnabled = false
          context.msImageSmoothingEnabled = false
          context.imageSmoothingEnabled = false
          let position = 0

          // 生成的画布元素宽高
          const canvasWidth = canvas.width
          const canvasHeight = canvas.height

          // 页面等比例缩放后宽高
          const pageWidth = a4Width
          const pageHeight = (a4Width / canvasWidth) * canvasHeight

          // 返回图片dataURL，参数：图片格式和清晰度(0-1)
          const jpeg = canvas.toDataURL('image/jpeg', 1.0)
          // 第一个参数是纵横向，第二个参数是单位，第三个参数是生成pdf的大小，自定义pdf大小的话可以传入一个数组，eg：[164.14, 424.5]
          // 方向默认竖直，尺寸ponits，格式a4 [595.28,841.89]
          // const pdf = new JsPDF('', 'pt', [595.28, 841.89]/* [a4Width, a4Height] */)
          const pdf = new JsPDF('', 'pt', [605.28, 841.89]/* [a4Width, a4Height] */)
          // const pdf = new JsPDF('', 'pt', [this.contentWidth, 841.89]/* [a4Width, a4Height] */)
          // const pdf = new JsPDF('', 'pt', 'a4'/* [a4Width, a4Height] */)

          // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          // 当内容未超过pdf一页显示的范围，无需分页
          let height = pageHeight
          if (height < a4Height) {
          // 第三，四个参数是图片偏移位置，第五六个参数是生成的图片的宽高
            pdf.addImage(jpeg, 'JPEG', 5, 5, pageWidth, pageHeight) // 从图片顶部开始打印
          } else {
            while (height > 0) {
              pdf.addImage(jpeg, 'JPEG', 0, position, pageWidth, pageHeight)
              height -= a4Height
              position -= a4Height
              // 避免添加空白页
              if (height > 0) {
                pdf.addPage()
              }
            }
          }
          pdf.save(`${downloadName}.pdf`)
        })
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

相关资料记录：
https://juejin.cn/post/7230757380820533303