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