vue下載pdf

pdf功能下載，相信只要是開發，都遇到過這個功能，直接上代碼：

使用此方式時，vue需要安裝模塊：

    npm install html2canvas jspdf --save
　　
　　downPdf() {
                var that = this;
                var target = document.getElementById("policy-information");//policy-information是html的id信息
                //target.style.background = "#FFFFFF";
                html2canvas(target, {
                    "imageTimeout": 0,
                    'scale': 2,
                }).then(canvas => {
                    var contentWidth = canvas.width;
                    var contentHeight = canvas.height;
                    //一頁pdf顯示html頁面生成的canvas高度;
                    var pageHeight = contentWidth / 592.28 * 841.89;
                    //未生成pdf的html頁面高度
                    var leftHeight = contentHeight;
                    //頁面偏移
                    var position = 0;
                    //a4紙的尺寸[595.28,841.89]，html頁面生成的canvas在pdf中圖片的寬高
                    var imgWidth = 595.28;
                    var imgHeight = 592.28 / contentWidth * contentHeight;
                    var pageData = canvas.toDataURL('image/jpeg', 1.0);
                    var pdf = new jspdf('', 'pt', 'a4');

                    //有兩個高度需區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)
                    //當內容未超過pdf一頁顯示的范圍，無需分頁
                    if(leftHeight < pageHeight) {
                        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)              
　　　　　　　　　　    } else {
                        while(leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            //避免添加空白頁
                            if(leftHeight > 0) {
                                pdf.addPage();
                            }
                        }
                    }
                    var name = 'content-' + new Data().getTime() + '.pdf'; // 定義生成的pdf的文件名字
                    pdf.save(name);
                });
            },

　　以上代碼會有一寫問題，會導致內容丟失。

說明一下我們的項目。左側是菜單欄，頭部也有一個菜單欄，單機下載功能，會導致導出的左側數據丟失部分（左側菜單的寬度）。

目前解決方案是：單機下載之前，先把左側按鈕縮回去，然后再下載。后續研究下如何處理