里講一種實現起來比較簡單的html轉pdf下載的實現。

依賴插件

html2canvas jspdf

思路

通過html2canvas，我們可以將指定的一個dom元素，渲染到canvas中，然后從canva中獲得該圖片，并將圖片通過jspdf來生成。

代碼

function createPdf (selector,pagesize,direction,title){
    var key = pagesize +''+direction;
    var settings = {
        '00' : {
            pdf : {orientation : 'portrait',format : 'a4',unit : 'px'},
            width : 448,
            height : 632.5
        },
        '01' : {
            pdf : {orientation : 'landscape',format : 'a4',unit : 'px'},
            width : 632.5,
            height : 448
        },
        '10' : {
            pdf : {orientation : 'portrait',format : 'a3',unit : 'px'},
            width : 632.5,
            height : 894.2
        },
        '11' : {
            pdf : {orientation : 'landscape',format : 'a3',unit : 'px'},
            width : 894.2,
            height : 632.5
        }
    };
    var set = settings[key];
    var doc = new jsPDF(set.pdf);
    var arr = [];//根據順序保存
    var $arr = $(selector);
    function tempCreate(){
        if($arr.length == 0){//沒有啦
            //執行生成
            tempPdf();
        }else{
            var $dom = $arr.splice(0,1);
            html2canvas($dom[0]).then(canvas => {
                var dataurl = canvas.toDataURL('image/png');
                arr.push(dataurl);
                tempCreate();
            });
        }
    }
    function tempPdf(){
        arr.forEach((item,i)=>{
            if(i !== 0){
                doc.addPage();
            }
            doc.addImage(item,'png',-1,-1,set.width,set.height);//根據不同的寬高寫入
        })
        //根據當前的作業名稱
        doc.save(title+'.pdf');
    }
    tempCreate();
}

需要指定容器(依賴jquery),然后指定紙張A4或 A3，以及橫縱向。

//調用
createPdf('.single-page',0,0,'test')

當然，如果是數據量很大的話，就不建議在前臺生成了，最好還是放在后端去做。個人測試過，做A4的圖片生成PDF，當數量大約在100左右的時候，瀏覽器就崩潰了，如果只是幾頁的數據的話，這個方式還是很方便的。

Ps：瀏覽器要是現代瀏覽器哈。

參考資料

html2canvas : http://html2canvas.hertzen.com/ jspdf :https://github.com/MrRio/jsPDF

條APP上有個截圖分享功能，就是把文章轉成一張圖片，然后分享到各渠道中去，如微信、QQ等，非常實用，因此，打算就這項功能自己封裝為一個組件ImageGenerator，后期專門進行圖片生成，html是其中的一個源。

目前前端使用較多的html轉圖片的工具是Html2Canvas，考慮技術儲備和問題討論的充裕性，決定封裝一下這個工具。步驟如下：

安裝HTML2Canvas

按照官方要求，做安裝操作：

npm

npm install html2canvas

我當時下載的是1.4.1的版本。

這個工具有自身的一些限制，使用時要注意：

[1] 并非真正的截圖軟件，而是根據DOM繪制出來的，其繪制能力，完全依賴于工具對DOM和對應屬性的支持和理解;

[2] 因為使用了Canvas支持，生成圖片的區域不能再有Canvas應用，否則會干擾工具的生成，不能保證生成預期，因此，如果使用了Canvas圖表的應用這個工具不推薦使用

封裝ImageGenerator

這個很簡單，這里就是封裝一個組件，用于后期引入html之外的源生成圖片，同時也做一下圖片的統一顯示，從而和系統整體的設計進行配合。大致的實現思路如下：

上圖，我們引入了工具本身，并設置的結果的顯示區。生成的結果將以節點的方式注入 #image-box 中。

上圖，封裝了一個方法，用途是利用Html2Canvas工具獲得圖片，這里我們引入了一個組件的數據imageData用以存儲和干預生成結果。在這里，我把ImageGenerator封裝為全局組件。

應用場景

我們在文章的尾部加入一個share功能，點擊彈出分享設置的彈窗，實際效果如下圖所示：

以上技術實現比較簡單，這里就不進行贅述了。上圖中，我們設置了一個生成圖像按鈕，點擊該按鈕則可以觸發我們組件中的對應操作。關鍵思路包括：

【1】這里設置了一個封裝組件shareHandler，封裝了前導模塊和imageGenerator，這兩個模塊的顯示通過一個開關進行控制，該開關則通過圖像生成成功事件進行賦值，這樣的話，我們可以實現圖片生成后，不再顯示前導模塊，而是顯示圖片結果，即ImageGenerator。

【2】這里有一個比較關鍵的操作是shareHandler通過觸發事件將轉換器發射到文章轉換現場，為什么用事件，還是那句話，事件對于解耦和消除組件依賴是最自然的實現。注意，這里我把imageGenerator通過引用的方式作為參數傳出了，這樣的好處是事件將轉換器代入了轉換現場，并可以攜帶回現場轉換結果。

【3】在文章查看器，solutionViewer中，自然會訂閱事件、事件處理和取消訂閱。注意這里的事件處理，實際上是調用了轉換器中我們封裝的函數，參數則是現場取得的，這里的機制很簡單，定義要轉換div的id，作為參數傳入函數。

那么，點擊圖像后，我們可以看到效果圖：

點擊右鍵另存圖像，我們可以獲得一張png格式的圖片，至于后續對下載和到粘貼板的支持，大家可以自行研究和實現。

注意事項

實現過程中有幾個注意事項：

【1】Canvas返回時，其長寬都是按照實際大小生成的，而我們的例子中，則要根據右抽屜式的彈窗做width=100%，height=auto的處理，這個要如何實現，就是要通過我們在imageGenerator中引入的imageData。

【2】我們的文章顯示中，引入了文件管理的微服務，因此，文章中圖片的鏈接都是跨域的，所以，必須打開html2Canvas的跨域選項，在封裝的組件里，我是通過一共一個defaultOptions來實現這一點的。

這個選項可以在轉換場景提供，也可提供一系列的默認值，最常用的除跨域外，還有是否允許log輸出等開關，大家感興趣可以自行查閱html2Canvas的官網。

內容比較簡單，大家如果有這個應用場景，可以參考實現一下，有問題歡迎大家隨時交流。謝謝大家的支持。