使用html2canvas+jspdf导出iframe内容到pdf文件


使用html2canvas+jspdf导出iframe内容到pdf文件

工具如下：
html2canvas.js
html2canvas.min.js
jspdf.debug.js
代码如下：

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
<script>
        // 生成canvas并导出pdf文件
        function exportPdf() {
            var dom = document.getElementById('iframeId').contentWindow.document.documentElement;
            html2canvas(dom, {
                background: "#FFFFFF",// 如果指定的div没有设置背景色会默认成黑色,这里是个坑
//              useCORS: true,
                onrendered:function(canvas) {
                    // 未生成pdf的html页面高度
                    var leftHeight = canvas.height;
                    var a4Width = 595.28-56.69
                    var a4Height = 841.89-56.69
                    // 一页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('x', 'pt', 'a4');
                    var index = 1,
                        canvas1 = document.createElement('canvas'),
                        height;
                    pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen');
                    var pdfName='文件名称';
                    var num = 0;
                    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;
                            // console.log(index, 'height:', height, 'pos', position);
                            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);
                           // pdf.setPageSize(null, pageHeight)
                            if(position != 0){
                                pdf.addPage();
                            }
                            pdf.addImage(canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 28.345, 28.345, a4Width, a4Width / canvas1.width * height);
                            leftHeight -= height;
                            position += height;
                            if (leftHeight > 0) {
                                setTimeout(createImpl, 500, canvas);
                            } else {
                                pdf.save(pdfName + '.pdf');
                            }
                        }
                    }
                    // 当内容未超过pdf一页显示的范围，无需分页
                    if (leftHeight < a4HeightRef) {
                        pdf.addImage(pageData, 'JPEG', 28.345, 28.345, a4Width, a4Width / canvas.width * leftHeight);
                        pdf.save(pdfName + '.pdf');
                    } else {
                        try {
                            pdf.deletePage(0);
                            setTimeout(createImpl, 500, canvas);
                        } catch (err) {
                            console.log(err);
                        }
                    }
                }
            })
        }
    </script>

注意：生成canvas的dom元素应为iframe中的页面元素，即：

1
var dom = document.getElementById('iframeId').contentWindow.document.documentElement;