將網頁轉換成PDF的方法很多種
比較常見且最簡單的方式就是直接使用列印功能
在印表機選擇”另存成PDF”
不過我還是想嘗試能不能用JavaScript的方式來輸出
在網路找了很多教學文章
大致可以分為兩種方式
1.使用名稱為 jsPDF的函式庫
但是這個函式庫比較適合”無中生有”的方式來”產生”PDF
從Demo的網頁就可以看出來,可以透過函式庫的不同方法(method)來產生PDF
然而想要將現成的網頁轉成PDF時,無論是直接使用addHTML輸出網頁內容
還是使用html2canvas,將網頁先輸出成canvas再轉換成PDF
兩種方式產生的PDF內容都會變形或者有缺漏
比較好的方式是搭配另一個函式庫 rasterizehtml
先處理html,然後透過jsPDF輸出成canvas,再轉成PDF
2.利用windows物件的功能
將想要輸出的頁面寫入一個新的視窗,執行列印,在印表機選擇”另存成PDF”
或者其他PDF模擬印表機的功能
這個方式的輸出效果應該是最好,只是流程上還是會有需要手動執行
不能按一個鈕,然後直接產生PDF
也或許可能,後續可以再研究研究
需要注意的地方是不管是方法1.還是方法2
頁面的CSS都要寫在輸出頁面的區塊內
這樣才能將CSS效果一起輸出
如果使用jsPDF的話,需要注意版本的問題
1.X版的物件宣告跟2.X版的不一樣
1.X版是 .jsPDF
2.X版則是 .jspdf.jsPDF
應該也有功能細部上的差異,但是我只是用到轉換的功能
所以沒有感覺有太大的差別