在Web開發中，將HTML頁面轉換為PDF文件是一項常見的需求。無論是生成報告、發票、還是其他任何需要打印或以PDF格式分發的文檔，開發者都需要一個既簡單又可靠的解決方案。幸運的是，pdfmake.js庫以其輕量級、高性能和易用性，成為了許多開發者的首選。本文將介紹如何使用這個擁有11K Star的GitHub項目來實現HTML到PDF的轉換。

什么是pdfmake.js

pdfmake.js是一個基于JavaScript的庫，用于在客戶端和服務器端生成PDF文檔。它允許開發者使用HTML和CSS來設計PDF文檔的布局和樣式，使得創建復雜的PDF文檔變得異常簡單。

為什么選擇pdfmake.js

• pdfmake.js的文件大小僅為11KB（壓縮后），這使得它成為Web應用中一個非常輕量級的解決方案
• 擁有超過11K Star的GitHub項目，pdfmake.js得到了廣泛的社區支持和認可，穩定性和可靠性值得信任
• 功能豐富，它支持表格、列表、圖片、樣式、頁眉頁腳等多種元素，幾乎可以滿足所有PDF文檔的需求。
• pdfmake.js可以輕松集成到任何現有的Web應用中，無論是使用Node.js、Angular、React還是Vue.js。

快速開始

安裝

通過npm安裝pdfmake.js非常簡單：

npm install pdfmake

或者，如果你使用yarn：

yarn add pdfmake

創建PDF文檔

創建一個PDF文檔只需要幾個簡單的步驟：

1. 引入pdfmake.js

import  pdfMake from 'pdfmake/build/pdfmake';//引入中文字體，避免轉換的PDF中文亂碼
pdfMake.fonts = {AlibabaPuHuiTi: {normal: 'https://xx/AlibabaPuHuiTi-3-55-Regular.ttf',bold: 'https://xxx/AlibabaPuHuiTi-3-65-Medium.ttf',italics: 'https://xxx/AlibabaPuHuiTi-3-55-Regular.ttf',bolditalics: 'https://xxx/AlibabaPuHuiTi-3-65-Medium.ttf'}
};

1. 定義文檔內容

const dd = {content: ['Hello, 我是程序員凌覽',{ text: 'This is a simple PDF document.', fontSize: 12 },{ text: 'It is generated using pdfmake.js.', bold: true }],//設置默認字體defaultStyle: {font: 'AlibabaPuHuiTi'},
};

1. 創建PDF

const pdf = pdfMake.createPdf(dd);
pdf.getBlob((buffer) => {const file = new File([blob], filename, { type: blob.type })//上傳服務器
});//或直接下載
pdf.download('文件名.pdf')

生成的pdf效果：

想動手體驗，請訪問pdfmake.org/playground.html。

html-to-pdfmake 強強聯合

當PDF文檔內容非固定，content字段內的結構要隨時可變，不能再像下方代碼塊一樣寫死，html-to-pdfmake即為解決這類問題而產生的。

const dd = {content: ['Hello, 我是程序員凌覽',{ text: 'This is a simple PDF document.', fontSize: 12 },{ text: 'It is generated using pdfmake.js.', bold: true }],//設置默認字體defaultStyle: {font: 'AlibabaPuHuiTi'},
};

安裝

通過npm安裝：

npm install html-to-pdfmake

或者，如果你使用yarn：

yarn add html-to-pdfmake

HTML字符串轉pdfmake格式

1. 引入html-to-pdfmake

import  pdfMake from 'pdfmake/build/pdfmake';
import  htmlToPdfmake from 'html-to-pdfmake';//引入中文字體，避免轉換的PDF中文亂碼
pdfMake.fonts = {AlibabaPuHuiTi: {normal: 'https://xx/AlibabaPuHuiTi-3-55-Regular.ttf',bold: 'https://xxx/AlibabaPuHuiTi-3-65-Medium.ttf',italics: 'https://xxx/AlibabaPuHuiTi-3-55-Regular.ttf',bolditalics: 'https://xxx/AlibabaPuHuiTi-3-65-Medium.ttf'}
};//它會返回pdfmake需要的數據結構
const html = htmlToPdfmake(`<div><h1>程序員凌覽</h1><p>This is a sentence with a <strong>bold word</strong>, <em>one in italic</em>,and <u>one with underline</u>. And finally <a href="https://www.somewhere.com">a link</a>.</p></div>
`);

1. 使用html-to-pdfmake轉換的數據結構

const dd = {content:html.content, //設置默認字體defaultStyle: {font: 'AlibabaPuHuiTi'},
};
const pdf = pdfMake.createPdf(dd);
pdf.download()

生成的pdf效果：

添加圖片要額外設置:

const ret = htmlToPdfmake(`<img src="https://picsum.photos/seed/picsum/200">`, {imagesByReference:true
});
// 'ret' contains:
//  {
//    "content":[
//      [
//        {
//          "nodeName":"IMG",
//          "image":"img_ref_0",
//          "style":["html-img"]
//        }
//      ]
//    ],
//    "images":{
//      "img_ref_0":"https://picsum.photos/seed/picsum/200"
//    }
//  }const dd = {content:ret.content,images:ret.images
}
pdfMake.createPdf(dd).download();

最后

通過上述步驟，我們可以看到pdfmake.js及其配套工具html-to-pdfmake為Web開發者提供了一個強大而靈活的工具，以滿足各種PDF文檔生成的需求。無論是靜態內容還是動態生成的內容，這個組合都能提供簡潔而高效的解決方案。

程序員凌覽的技術網站https://linglan01.cn/；關注公粽號【程序員凌覽】回復"1"，獲取編程電子書