這裡講一種實現起來比較簡單的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
