前端html導出爲pdf文檔，且圖表不被分頁分割

由於項目需要前端導出文檔，一開始是準備導出word,後來發現導出word比較麻煩，並且前端基本都是由echarts和dataTable組成的，不好導出，最後改爲導出爲pdf,採用的是jsPDF和html2canvas

一、先引入html2canvas和jsPDF

<script type="text/javascript" src="/resource/plugins/jsPDF/jspdf.debug.js"></script>
<script type="text/javascript" src="/resource/plugins/jsPDF/html2canvas.js"></script>
<script type="text/javascript" src="/resource/plugins/jsPDF/rasterizeHTML.js"></script>

二、使用jsPDF導出需要導出的div塊，直接通過對應的id即可，其中html2canvas截取當前頁面保存爲canvas

// 導出日報
            $("#exportall").on("click", function (url, name, data1) {
                if (confirm("您確認下載該PDF文件嗎?")) {
                    var pdf = new jsPDF('p', 'pt', 'a4');
                    // 設置打印比例 越大打印越小
                    pdf.internal.scaleFactor = 1.5;
                    var options = {
                        pagesplit: true, //設置是否自動分頁
                        "background": '#FFFFFF'   //如果導出的pdf爲黑色背景，需要將導出的html模塊內容背景 設置成白色。
                    };
                    var printHtml = $('#monthlyReport').get(0);   // 頁面某一個div裏面的內容，通過id獲取div內容
                    pdf.addHTML(printHtml, 15, 15, options, function () {
                        pdf.save('後勤月報.pdf');
                    });
                }
            });

 

重點在 var printHtml = $('#monthlyReport').get(0);，可以導出局部的div,不一定需要導出整個頁面

三、結果，成功導出

四、存在的問題及優化

由於需要導出內容主要是由echarts和dataTable組成的，再加上內容比較長，需要分頁，所以會出現圖形或者表格被分頁分割成兩部分，如圖

解決方案，通過計算高度判斷是否換到下一頁，網上找的，代碼比較複雜，也沒有細究，直接上代碼

// 導出日報
            $("#exportall").on("click", function (url, name, data1) {
                if (confirm("您確認下載該PDF文件嗎?")) {
                    var id='monthlyReport';
                    html2canvas($("#"+id), {
                        background: "#FFFFFF",//如果指定的div沒有設置背景色會默認成黑色,這裏是個坑
                        onrendered:function(canvas) {

                            //未生成pdf的html頁面高度
                            var leftHeight = canvas.height;

                            var a4Width = 595.28
                            var a4Height = 841.89
                            //一頁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='後勤月報';
                            $('.head-content').append($(
                                '<div class="pdfTip">' +
                                '   <div>正在生成第<span class="pdfProgress">1</span>頁，共<span class="pdfTotal"></span>頁...' +
                                '</div>'));
                            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', 0, 0, a4Width, a4Width / canvas1.width * height);
                                    leftHeight -= height;
                                    position += height;
                                    $('.pdfProgress').text(index + 1);
                                    $('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef));
                                    if (leftHeight > 0) {
                                        setTimeout(createImpl, 500, canvas);
                                    } else {
                                        pdf.save(pdfName + '.pdf');
                                        $('.pdfTip').remove();
                                    }
                                }
                            }

                            //當內容未超過pdf一頁顯示的範圍，無需分頁
                            if (leftHeight < a4HeightRef) {
                                pdf.addImage(pageData, 'JPEG', 0, 0, a4Width, a4Width / canvas.width * leftHeight);
                                pdf.save(pdfName + '.pdf')
                            } else {
                                try {
                                    pdf.deletePage(0);
                                    $('.pdfTip').show();
                                    $('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef));
                                    setTimeout(createImpl, 500, canvas);
                                } catch (err) {
                                    console.log(err);
                                }
                            }
                        }
                    })
                }
            });

結果如圖

可以看出，通過計算如果會被分隔則會自動切換到下一頁，雖然有些部分還是看着不是根很舒服，但是還是實現了，不過用這個有個問題就是由於需要計算，所以導出會比較慢！