育機構在做定制化軟件開發的時候，會遇到這樣一個問題：機構需要定制自己的錯題本封面和封底，并且題目界面需要有各種便簽可供學生標記，例如下面這個圖：

要顯示這樣的錯題界面，如果用word形式，一種辦法是通過html轉換成word，但是這樣會導致部分理科題目無法顯示的情況；另一個辦法是直接在word中顯示html，這種形式其實還是html，體驗不太好，打印出來也會出問題。所以我們采取的是通過PDF的形式展示這種格式，并且還可以定制封面和封底：如下圖:

因為PDF是比較好的打印格式，不會出現混亂的情況，所以目前就是怎么解決html完美轉換成PDF的問題。

我們嘗試了很多插件以后，最終發現下面這2個工具比較合適：wkhtmltopdf和phantomjs，下面分別試一下他們的效果：

• wkhtmltopdf：下載完成后需要添加到環境變量才能在代碼中使用，比如我們使用的是PHP，就可以通過shell_exec執行命令行。通過官網我們知道wkhtmltopdf還是非常強大的，可以設置頁面為A3或者A4格式，可以設置頁眉頁腳，也可以設置字間距，字體，邊框等，能滿足大部分的轉換需求，但是wkhtmltopdf也有他的缺點，就是對于js渲染后的頁面轉換后顯示不太友好。對于我們的需求而言，要解決的難點就是理科公式的問題，因為我們的latex公式基本都是js渲染后才顯示。后來發現wkhtmltopdf有一個參數就是可以設置等待時間，最終我們設置等待5秒在導出，就解決了latex導出PDF的問題，并且實現了完美的打印

• phantomjs：使用方法都差不多，只是phantomjs需要通過js來配置參數。一樣的需要先添加phantomjs到環境變量，然后通過代碼執行命令行實現，也可以設置加載時間來實現js對html的渲染，只是phantomjs沒有wkhtmltopdf轉換專業。

本文希望通過自己的開發經驗，減少教育軟件開發者的坑。可以通過下面這個網站進行測試：http://www.widomk12.cn

一篇：node.js 15 如何操作Excel文件

幾乎所有的項目涉及到報表或者合同處理等，都會跟PDF打交道。

node.js中，用的比較多的是html-pdf，每周下載量達到8萬多，是比較多了。

這款工具的特點是不光可以通過代碼調用API生成pdf，還提供命令行工具html-pdf來將html文件轉換成pdf文件。

接下來，我們看一下html-pdf的安裝使用。

html-pdf 安裝

 npm install -g html-pdf

由于html-pdf是基于phantomjs的，所以在安裝過程中會自動下載phantomjs。

html-pdf命令行

html-pdf test/businesscard.html businesscard.pdf

直接運行html-pdf加上源html文件，后面加上pdf文件名就可以生成pdf文件。

創建PDF文件，代碼示例

//引入fs, html-pef模塊
var fs=require('fs');
var pdf=require('html-pdf');
//讀取html文件
var html=fs.readFileSync('./test/businesscard.html', 'utf8');
//參數options, 將PDF format設為letter, 如果是A4,直接將下面代碼中的letter換成A4即可
var options={ format: 'Letter' };

//創建pdf文件
pdf.create(html, options).toFile('./businesscard.pdf', function(err, res) {
  if (err) return console.log(err);
  console.log(res); // { filename: '/app/businesscard.pdf' }
});

相關API

var pdf=require('html-pdf');
pdf.create(html).toFile([filepath, ]function(err, res){
  console.log(res.filename);
});

pdf.create(html).toStream(function(err, stream){
  stream.pipe(fs.createWriteStream('./foo.pdf'));
});

pdf.create(html).toBuffer(function(err, buffer){
  console.log('This is a buffer:', Buffer.isBuffer(buffer));
});

HTML中的header 和footer可以直接讀出

html-pdf 可以將html中的header和footer讀出。只要是id為pageHeader或者pageFooter的都可以被識別出來。

<div id="pageHeader">Default header</div>
<div id="pageHeader-first">Header on first page</div>
<div id="pageHeader-2">Header on second page</div>
<div id="pageHeader-3">Header on third page</div>
<div id="pageHeader-last">Header on last page</div>
...
<div id="pageFooter">Default footer</div>
<div id="pageFooter-first">Footer on first page</div>
<div id="pageFooter-2">Footer on second page</div>
<div id="pageFooter-last">Footer on last page</div>

關于參數options

在調用API pdf.create(html, options).toFile()創建PDF時，這里面的參數options相當強大，可以傳很多數據。包括之前說的A4格式。