產品中難免有需要在web上生成pdf并導出或下載的需求。當然解決方案可能很多，比如html轉換成pdf, 或者做一個freemaker或word的模版，然后轉換成pdf.
下面主要說說html轉換成pdf的方案，畢竟使用html模版更方便直接。通常有以下兩類解決方案：
- server端轉換成pdf;
- web端通過第三方js插件轉換；
server端轉換html生成pdf
在服務器端轉換通常用到的插件是iText. 但是iText對css的支持不好，不過有一個對iText封裝后的開源插件flying-saucer就可以解決這個問題。
flying-saucer主要是通過讀取html源碼來生成pdf。因此，它對html的檢查很嚴格，必須使用閉合標簽，即"</meta> </>"這種才是可識別的。
flying-saucer可以通過三種方式來轉換html。
- 獲得html靜態文件路徑；
- 讀取html文件流；
- 獲得html url鏈接。
下面來看看主要代碼：
pom.xml
<dependency>
<groupId>org.xhtmlrenderer</groupId>
<artifactId>flying-saucer-pdf-itext5</artifactId>
<version>9.1.1</version>
</dependency>
GeneratePdf.java
...
ITextRenderer renderer = new ITextRenderer();
//url或者物理路徑
renderer.setDocument("http://localhost:8080/report/templete");
ITextFontResolver fontResolver = renderer.getFontResolver();
//支持中文
if (System.getProperty("os.name").contains("Window")) {
fontResolver.addFont("C:/Windows/Fonts/simsun.ttc", BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED);
} else {
fontResolver.addFont("/usr/share/fonts/win/simsun.ttc", BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED);
}
renderer.layout();
renderer.createPDF(os);
...
demo.html
...
<style type="text/css">
body {
font-family: SimSun;//支持中文
}
</style>
...
flying-saucer轉換pdf有一個問題，就是如果html不能靜態化，那么內容就沒辦法轉換成pdf。比如html用了vue.js來繪制一些圖表，這個是沒法用flying-saucer來生成pdf的。
有一種解決方案就是給打開的html生成快照，然后將圖片轉換成pdf。這就是接下來介紹的web端轉換html生成pdf。
web端轉換html生成pdf
web端html轉pdf就簡單多了，可以直接通過jspdf來解決，它的主要方式就是html生成cavans然后再生成pdf。
主要代碼如下：
demo.html
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js"></script>
<script>
function export1(){
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
pdf.save('web.pdf');
});
}
</script>
...
<div>
<button onclick="export1()">export</button>
</div>
...
這種方式會存在兩個問題，
- 分辨率問題會導致生成的pdf質量不會很高；
- 內容自適應，可能會把連續的內容截斷。
