如何將HTML頁面轉換爲PDF然後下載它？

Question

這樣的設計是我的網頁與HTML和CSS：

我怎樣才能下載相同的網頁爲PDF？我嘗試了很多解決方案，但我只獲取PDF文件中的內容，但沒有使用CSS樣式。

任何解決方案？

Answer 1

1. 下載的jsPDF最新版本。

2. 在項目中包含以下腳本：

   • jspdf.js
   • jspdf.plugin.from_html.js
   • jspdf.plugin.split_text_to_size.js
   • jspdf.plugin.standard_fonts_metrics .js文件

Answer 2

由於在this post解釋你可以使用JSpdf庫來做到這一點。

確保在文件中包含jQuery和jsPDF。

也得到html2canvasJS將文檔元素轉換爲畫布以修復CSS。

JS：

let doc = new jsPDF('p','pt','a4'); 

doc.addHTML(document.body,function() { 
    doc.save('html.pdf'); 
}); 

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> 

<div id="content"> 
    <h1 style="color:red">Hello World</h1> 
    <p>this is a PDF</p> 
</div> 

演示：JSFiddle

您也可以用一個按鈕觸發下載（see initial post for details）