推薦一款好用的輕量級的開源 HTML轉換 PDF工具，只需要 11k 就可以搞定！-開源-CodeUp Hub

在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文件只需要幾個簡單的步驟：

引入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'
    }
};

定義文件內容

const dd = {
  content: [
    'Hello, 我是程式設計師xiaoxiao',
    { text: 'This is a simple PDF document.', fontSize: 12 },
    { text: 'It is generated using pdfmake.js.', bold: true }
  ],
  //設定預設字型
  defaultStyle: {
    font: 'AlibabaPuHuiTi'
  },
};

建立PDF

const pdf = pdfMake.createPdf(dd);
pdf.getBlob((buffer) => {
   const file = new File([blob], filename, { type: blob.type })
   //上傳伺服器
});

//或直接下載
pdf.download('檔名.pdf')

生成的pdf效果：

推薦一款好用的輕量級的開源 HTML轉換 PDF工具，只需要 11k 就可以搞定！

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

推薦一款好用的輕量級的開源 HTML轉換 PDF工具，只需要 11k 就可以搞定！

html-to-pdfmake 強強聯合

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

const dd = {
  content: [
    'Hello, 我是程式設計師xiaoxiao',
    { 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格式

引入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>程式設計師xiaoxiao</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>
`);

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

const dd = {
  content:html.content, 
  //設定預設字型
  defaultStyle: {
      font: 'AlibabaPuHuiTi'
  },
};
const pdf = pdfMake.createPdf(dd);
pdf.download()

生成的pdf效果：

推薦一款好用的輕量級的開源 HTML轉換 PDF工具，只需要 11k 就可以搞定！

新增圖片要額外設定:

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();