前端實作html頁面轉pdf實作方案對比

　　昨天搞了個前端html轉pdf的功能。略有所收，踩了一些坑，是以做些記錄，為後來的兄弟做些提示。經過一番調研發現html導出pdf一般有這幾種方式，各有各有優缺，下面簡單介紹。

　　此種方案可以看昨天寫的部落格：​​jsPDF将html頁面生成pdf檔案的前端解決方案及html2canvas如何真正解決跨域圖檔的問題​​

　　主要就是利用html2canvas和jsPDF生成pdf檔案，對于不分頁的檔案比較好，如果對于需要分頁的檔案，則不大适合。當然對于确實需要分頁pdf檔案，下面這個方法通過列印預覽實作，也是不錯的選擇。

　　通過列印預覽來實作導出pdf并不是什麼稀奇事，一般浏覽器(Chrome)在頁面手動​<code>​Ctrl + P​</code>​都能将目前頁進行列印預覽。在列印預覽的時候我們更改列印方式，選擇​<code>​将頁面儲存為PDF​</code>​即可實作頁面儲存為PDF的功能。

　　比如我們在谷歌進行​<code>​Ctrl + P​</code>​就可以看到這個功能。而且對pdf分頁還處理的挺好的。

　　程式中實作這個則要靠下面這個方法來實作：

　　當然能導出PDF隻是主要需求，我們還有一些其他的需求

隻想将頁面的一​<code>​部分導出為PDF​</code>​

我們想導出的PDF是​<code>​A4紙大小​</code>​

我們想導出的PDF是​<code>​豎着的​</code>​

我們還想調整導出PDF的​<code>​樣式等等​</code>​

　　這些需求通過在對css中​<code>​媒體查詢​</code>​的定義就可以實作。具體可以看下這篇部落格：​​通過CSS控制window.print列印樣式淺析​​

　　需要提醒的是：如果要改變原有樣式，最好是在元素上​<code>​新加一個​</code>​class或者id來寫，而不是在原有class上寫。

　　比如有這樣一個元素

　　這樣寫是不起作用的。想要生效得在元素上新加一個class類寫

　　經過實踐，這樣寫才可以生效。

　　有人可能覺得這樣寫略有麻煩，别擔心，總有人會讓麻煩的事情變得簡單，基于​<code>​window.print()​</code>​有人封裝了一些插件：

　　​​PrintArea​​可以簡單的實作部分區域列印，他的原理是通過把要列印的部分放入一個新的iframe然後觸發這個iframe的print。這個插件不太穩定，會出現空白，請酌情使用。

　　​​jQuery.print​​比上面的稍微好點，支援了一些css方面的東西，具體看這個​​jQuery.print中文配置參數​​

　　這種方法前端實作，靈活簡單，而且在​<code>​頁面還原上是很好​</code>​的，生成pdf的​<code>​過程不需要自己操心​</code>​，​<code>​頁面樣式還可控​</code>​，可以說是非常不錯的。但是因為浏覽器對​<code>​print​</code>​方法的​<code>​支援不一​</code>​，是以目前也就隻能在Chrome上用用。另外，這個方法還需要使用者點一下儲存按鈕，​<code>​使用者體驗上也不太好​</code>​。

​<code>​　　iText​</code>​、​<code>​wkhtmltopdf​</code>​、​<code>​prince​</code>​這三個都是後端生成pdf的工具。這三個都沒有node api。

　　想看具體的比較可以參考這篇文章​​html頁面導出為pdf（jsPDF、iText、wkhtmltopdf）​​。