43、vue导出pdf文件，并解决滚动条外内容无法获取的问题

使用插件html2canvas和jspdf插件

下载完两个插件后引入所需要的页面

import html2canvas from "html2canvas"
import jsPDF from "jspdf"
1
2

1、在导出之前将元素的高度或者宽度设置为滚动高度或者宽度，如：

el.style.height = el.scrollHeight + 'px';//把要导出的元素高度设置为滚动高度
1

2、转为图片之后再将高度/宽度设回来

//下载完成后改变浏览器界面可视区域高度
el.style.height = el.clientHeight+ 'px'
1
2

以下导出pdf方法

// 导出页面为PDF格式---使用插件html2canvas和jspdf插件
export function exportPDF(titleName, id) {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    let el = document.querySelector("#my_table_1");
    var clientH = el.clientHeight;
    el.style.height = el.scrollHeight + 'px';//把要导出的元素高度设置为滚动高度
    html2canvas(el, {
        allowTaint: true,
        useCORS: true,
        dpi: 120, // 图片清晰度问题
        background: "#142D42", //如果指定的div没有设置背景色会默认成黑色,这里是个坑
        y: 0
    }).then((canvas) => {
        var currentPage = 1;
        //未生成pdf的html页面高度
        var leftHeight = canvas.height;
        var a4Width = 576;
        var a4Height = 772.89; //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
        //一页pdf显示html页面生成的canvas高度;
        var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height);
        //pdf页面偏移
        var position = 0;
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new jsPDF("p", "pt", "a4"); //A4纸，纵向
        pdf.addFont('simkai-normal.ttf', 'simkai', 'normal')
        pdf.setFont('simkai')
        pdf.setFontSize(20)
        var index = 1,
            canvas1 = document.createElement("canvas"),
            height;
        pdf.setDisplayMode("fullwidth", "continuous", "FullScreen");
        function createImpl(canvas) {
            if (leftHeight > 0) {
                index++;
                var checkCount = 0;
                if (leftHeight > a4HeightRef) {
                    var i = position + a4HeightRef;
                    for (i = position + a4HeightRef; i >= position; i--) {
                        var isWrite = true;
                        for (var j = 0; j < canvas.width; j++) {
                            var c = canvas
                                .getContext("2d")
                                .getImageData(j, i, 1, 1).data;
                            if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
                                isWrite = false;
                                break;
                            }
                        }
                        if (isWrite) {
                            checkCount++;
                            if (checkCount >= 10) {
                                break;
                            }
                        } else {
                            checkCount = 0;
                        }
                    }
                    height =
                        Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
                    if (height <= 0) {
                        height = a4HeightRef;
                    }
                } else {
                    height = leftHeight;
                }
                canvas1.width = canvas.width;
                canvas1.height = height;
                var ctx = canvas1.getContext("2d");
                ctx.drawImage(
                    canvas,
                    0,
                    position,
                    canvas.width,
                    height,
                    0,
                    0,
                    canvas.width,
                    height
                );
                var pageHeight = Math.round((a4Width / canvas.width) * height);
                if (position != 0) {
                    pdf.addPage();
                }
                pdf.addImage(
                    canvas1.toDataURL("image/jpeg", 1.0),
                    "JPEG",
                    10,
                    40,
                    a4Width,
                    (a4Width / canvas1.width) * height
                );
                leftHeight -= height;
                position += height;
                if (leftHeight > 0) {
                    setTimeout(createImpl, 500, canvas);
                } else {
                    pdf.save(titleName + ".pdf");
                    //下载完成后改变浏览器界面可视区域高度
                    el.style.height = clientH + 'px'

                }
            }
        }
        let targetPage = pdf.internal.getNumberOfPages();
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < a4HeightRef) {
            pdf.addImage(
                pageData,
                "JPEG",
                10,
                40,
                a4Width,
                (a4Width / canvas.width) * leftHeight
            );
            pdf.save(titleName + ".pdf");
            //下载完成后改变浏览器界面可视区域高度
            el.style.height = clientH + 'px'
        } else {
            try {
                pdf.deletePage(0);
                setTimeout(createImpl, 500, canvas);
            } catch (err) {
            }
        }
    })
}
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

vue页面使用

//导出pdf------ 数据统计汇总为导出文件名称；my_table_1为要导出的dom元素id
        exportData(){
            exportPDF("数据统计汇总",'my_table_1');
        },
1
2
3
4