js将html网页转换成PDF并解决了图表文字被切割的问题

给页面内所有要转换成PDF的HTML元素添加一个class=“toPDF” 输出的时候，
遍历所有class="toPDF"的HTML元素
将它们逐个加入到pdf文档中，添加的时候如果超出的则添加一页

一、安装

npm install --save html2canvas
npm i jspdf --save
1
2

二、html

<div class="content" id="pdfDom">
    <div class="toPDF">pdf第一页内容</div>
    <div class="toPDF">pdf第二页内容</div>
    <div class="toPDF">pdf第三页内容</div>
    <div class="toPDF">pdf第四页内容</div>
    <!-- 每一块dom的class类设置成toPDF（自定义）以此处理内容分割，
    类似于将网页按pdf的形式进行分页 高度不固定-->
</div>

1
2
3
4
5
6
7
8
9
10

三、封装一个导出的方法

import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'

/**
 * @param  pdfDom          要生成 pdf 的DOM元素（容器）
 * @param  padfName        PDF文件生成后的文件名字
 * */
 //打印
export function exportPDF(pdfDom, padfName) {
    //打印的内容
    var ele = document.getElementById(pdfDom);
 
    //根据html中需要被转成pdf的dom节点的class 筛选出来的List (防止文字被切断)
    let item = ele.querySelectorAll(".toPDF")
 
    let eleW = ele.offsetWidth// 获得该容器的宽
    let eleH = ele.offsetHeight// 获得该容器的高
    let eleOffsetTop = ele.offsetTop  // 获得该容器到文档顶部的距离
    let eleOffsetLeft = ele.offsetLeft // 获得该容器到文档最左的距离
 
    var canvas = document.createElement('canvas')
    var abs = 0
 
    let win_in = document.documentElement.clientWidth || document.body.clientWidth // 获得当前可视窗口的宽度（不包含滚动条）
    let win_out = window.innerWidth // 获得当前窗口的宽度（包含滚动条）
 
    if (win_out > win_in) {
        // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
        abs = (win_out - win_in) / 2    // 获得滚动条宽度的一半
        // console.log(a, '新abs');
    }
    canvas.width = eleW * 2    // 将画布宽&&高放大两倍
    canvas.height = eleH * 2
 
    var context = canvas.getContext('2d')
    context.scale(2, 2)
    context.translate(-eleOffsetLeft - abs, -eleOffsetTop)
    // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
    // translate的时候，要把这个差值去掉
 
    var pdf = new jsPDF('', 'pt', 'a4')
   
    let position = 0 //页面偏移
    let pageHeight = 801.89 //PDF页面高度
 
    for (let i = 0; i < item.length; i++) {
        canvas = await html2canvas(item[i], {dpi: 300, useCORS: true})
        // console.log(item[i])
        var contentWidth = canvas.width
        var contentHeight = canvas.height
        // a4纸的尺寸[595.28,841.89]
        var imgWidth = 535.28 //图片宽度 原是595.38，因左右留白30，减去60
        var imgHeight = 595.28 / contentWidth * contentHeight //图片高度
        var pageData = canvas.toDataURL('image/jpeg', 1.0)
 
        if (imgHeight < pageHeight){ 
            if (position === 0){ //页面偏移为0
                position = 30; //第一张图片，上边距留白30，页面偏移从30开始
            }
 
        }else { //页高剩余的高度不足放下当前图片高度，则另起一页
 
            pdf.addPage() //新增一张空白的页面
            position = 0 //页面偏移初始化
            pageHeight = 801.89 //页面高度初始化
            if (position === 0){
                position = 30; //第一张图片，上边距留白30，页面偏移从30开始
            }
            //pdf.addImage(pageData, 'JPEG', 30, position, imgWidth, imgHeight); //添加图片
            //position = position + imgHeight;
            //pageHeight = pageHeight - imgHeight;
        }
        pdf.addImage(pageData, 'JPEG', 30, position, imgWidth, imgHeight); //添加图片，30：为向左偏移30
        position = position + imgHeight; //新偏移 = 旧偏移 + 图片高度
        pageHeight = pageHeight - imgHeight; // 新页面高度 = 剩余页高 - 图片高度
 
      }
      pdf.save(padfName + '.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
68
69
70
71
72
73
74
75
76
77
78
79

四、使用方法

//导入
import {exportPDF} from '你封装导出方法的路径'

//调用此方法将网页导出pdf
exportPDF('pdfDom', '文件标题')


1
2
3
4
5
6
7