jspdf + html2canvas 實現html轉pdf -----提高分辨率(高清版版本)

前提：跟着我一步一步，最終一定會成功!(本人已經實現該功能)

背景：需要做一個導出PDF的功能，網上找有很多，但是一般導出來的都是比較模糊的那種，下面這個是高清版的，導出的PDF都是幾M，跟正常手動導出的差不多，很清晰。而且還有優點是無需經過後臺，純前段生成，很輕量，完全僅僅依賴客戶端即可！（後臺代碼過於複雜，尤其是用畫筆去畫，再填充數據等特別複雜，故推薦直接前端生成）

首先用到的JS如下：

注：如果你不知道去哪下載，本人已經爲你準備好
下載地址：html2canvas.js 、jsPdf.debug.js 下載

下面開始我們的步驟：

1.引入js後，準備一個頁面，用於測試，如下 test.html ：

2.導出pdf按鈕綁事件：

3.myExportPdf（）導出函數如下：

		//頁面轉canvas再轉PDF
        function myExportPdf(){
            var element = $("#print_box");    // 這個dom元素是要導出pdf的div容器
            var w = element.width();    // 獲得該容器的寬
            var h = element.height();    // 獲得該容器的高
            var offsetTop = element.offset().top;    // 獲得該容器到文檔頂部的距離
            var offsetLeft = element.offset().left;    // 獲得該容器到文檔最左的距離
            var canvas = document.createElement("canvas");
            var abs = 0;
            var win_i = $(window).width();    // 獲得當前可視窗口的寬度（不包含滾動條）
            var win_o = window.innerWidth;    // 獲得當前窗口的寬度（包含滾動條）
            if(win_o>win_i){
                abs = (win_o - win_i)/2;    // 獲得滾動條長度的一半
            }
            canvas.width = w * 2;    // 將畫布寬&&高放大兩倍
            canvas.height = h * 2;
            var context = canvas.getContext("2d");
            context.scale(2, 2);
            context.translate(-offsetLeft-abs,-offsetTop);
            // 這裏默認橫向沒有滾動條的情況，因爲offset.left(),有無滾動條的時候存在差值，因此
            // translate的時候，要把這個差值去掉
            html2canvas(element).then(function(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();
                        }
                    }
                }
                pdf.save('myTest.pdf');
            })
        }

4.點擊導出pdf成功，效果如下：

5.至此，前端利用插件html2canvas導出高清的pdf就完成啦！是不是很簡單，嘻嘻！