JavaScript實(shí)現(xiàn)html轉(zhuǎn)pdf的三種方法詳解

更新時(shí)間：2024年02月23日 10:47:52 作者：cooljser

近期項(xiàng)目需要實(shí)現(xiàn)將?html?頁面轉(zhuǎn)換成?pdf?報(bào)告的需求,經(jīng)過一番調(diào)研以及結(jié)合過往經(jīng)驗(yàn),發(fā)現(xiàn)了三種技術(shù)方案,下面我們就來看看它們的具體實(shí)現(xiàn)步驟吧

近期項(xiàng)目需要實(shí)現(xiàn)將 html 頁面轉(zhuǎn)換成 pdf 報(bào)告的需求，經(jīng)過一番調(diào)研以及結(jié)合過往經(jīng)驗(yàn)，發(fā)現(xiàn)了有如下三種技術(shù)方案，本篇文章主要內(nèi)容是基于這三種不同方案的 demo 實(shí)現(xiàn)及對比。

方案選型

html2canvas + jspdf
wkhtmltopdf
node + puppeteer

準(zhǔn)備工作

利用 chatgpt 生成一個(gè)報(bào)告的 html 模板，每頁包含了一個(gè)表格和一個(gè)由 echarts 生成的柱狀圖。實(shí)際項(xiàng)目中基本也是這樣的內(nèi)容，文字 + charts，所以用這個(gè)來測試具有一定的參考意義，生成的 html 模板如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Report Page</title>
    <!-- ECharts庫 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 20px;
      }
      .page {
        margin-bottom: 40px;
      }
      .chart {
        width: 600px;
        height: 400px;
        margin-top: 20px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        text-align: left;
        padding: 8px;
        border-bottom: 1px solid #ddd;
      }
    </style>
  </head>
  <body>
    <div class="page" id="page1">
      <h2>Page 1 - Data and Chart</h2>
      <table>
        <tr>
          <th>Item</th>
          <th>Value</th>
        </tr>
        <tr>
          <td>Item 1</td>
          <td>100</td>
        </tr>
        <tr>
          <td>Item 2</td>
          <td>200</td>
        </tr>
        <!-- 更多列表數(shù)據(jù) -->
      </table>
      <div id="chart1" class="chart"></div>
    </div>    

    <div class="page" id="page2">
      <table>
        <tr>
          <th>Item</th>
          <th>Value</th>
        </tr>
        <tr>
          <td>Item 1</td>
          <td>100</td>
        </tr>
        <tr>
          <td>Item 2</td>
          <td>200</td>
        </tr>
        <!-- 更多列表數(shù)據(jù) -->
      </table>
      <h2>Page 2 - Data and Chart</h2>
      <!-- 類似的列表和圖表占位符 -->
      <div id="chart2" class="chart"></div>
    </div>    

    <div class="page" id="page3">
      <table>
        <tr>
          <th>Item</th>
          <th>Value</th>
        </tr>
        <tr>
          <td>Item 1</td>
          <td>100</td>
        </tr>
        <tr>
          <td>Item 2</td>
          <td>200</td>
        </tr>
        <!-- 更多列表數(shù)據(jù) -->
      </table>
      <h2>Page 3 - Data and Chart</h2>
      <!-- 類似的列表和圖表占位符 -->
      <div id="chart3" class="chart"></div>
    </div>

    <script>
      // ECharts 圖表示例
      var chart1 = echarts.init(document.getElementById('chart1'));
      var option1 = {
        title: {text: 'ECharts 示例 1'},
        tooltip: {},
        xAxis: {data: ['類別1', '類別2', '類別3', '類別4']},
        yAxis: {},
        series: [{type: 'bar', data: [5, 20, 36, 10]}]
      };
      chart1.setOption(option1);

      // 為page2和page3重復(fù)上面的過程，設(shè)置不同的option配置
      var chart2 = echarts.init(document.getElementById('chart2'));
      chart2.setOption(option1);
      var chart3 = echarts.init(document.getElementById('chart3'));
      chart3.setOption(option1);
    </script>
  </body>
</html>

使用 http-server 在 html 頁面目錄下啟動(dòng)一個(gè) web 服務(wù)器(沒有 http-server, 參考這里安裝 www.npmjs.com/package/http-server)

http-server . -p 9090

訪問 http://127.0.0.1:9090/report.html，即可看到對應(yīng)的報(bào)告模板頁面，如下：

wkhtmltopdf

到這里 wkhtmltopdf.org/downloads.html 下載系統(tǒng)對應(yīng)版本的安裝包，然后安裝好

執(zhí)行如下命令，即可生成 pdf

wkhtmltopdf http://127.0.0.1:9090/report.html report.pdf

查看生成的 pdf 內(nèi)容，能正常顯示，看起來也沒啥問題

實(shí)際報(bào)告肯定是有多頁的，接下來我們嘗試一下看看如何分頁。在 page1 和 page2 元素后分別加入一個(gè)

元素，對應(yīng)的 class 如下：

.page-break-after {
	page-break-after: always;
}

然后再次執(zhí)行轉(zhuǎn)換命令，得到的 pdf 如下：

問題

偶爾會(huì)卡在某個(gè)進(jìn)度不動(dòng)，不知道為啥

執(zhí)行時(shí)間不穩(wěn)定，時(shí)快時(shí)慢

putteteer

安裝就不多說明了，自行 google。安裝好后，同樣讓 chatgpt 生成一段測試的代碼，如下：

const puppeteer = require('puppeteer');

async function savePageAsPDF(url, outputPath) {
  // 啟動(dòng)瀏覽器
  const browser = await puppeteer.launch();
  // 打開新頁面
  const page = await browser.newPage();
  // 導(dǎo)航到指定URL
  await page.goto(url, { waitUntil: 'networkidle2' });
  // 保存頁面為PDF
  await page.pdf({ path: outputPath, format: 'A4' });
  // 關(guān)閉瀏覽器
  await browser.close();
  console.log(`PDF已保存到：${outputPath}`);
}

// 調(diào)用函數(shù)保存網(wǎng)頁為PDF
savePageAsPDF('http://127.0.0.1:9090/report.html', 'report1.pdf').catch(console.error);

執(zhí)行轉(zhuǎn)換腳本

node index.js

得到的 pdf 內(nèi)容如下，看起來也沒啥問題

html2canvas + jspdf

引入 html2canvas 和 jspdf 相關(guān)腳本

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.3.1/jspdf.umd.min.js"></script>

添加下載按鈕及轉(zhuǎn)換函數(shù)

<button onclick="convertToPDF()">Convert to PDF</button>

<script>
		async function addPage(id, pdf) {
			const element = document.getElementById(id);

			// 使用 html2canvas 渲染指定元素
			const canvas = await html2canvas(element, {scale: 2});
			const imgData = canvas.toDataURL('image/png');

			// 使用 jsPDF 創(chuàng)建PDF文檔
			const imgProps = pdf.getImageProperties(imgData);
			const pdfWidth = pdf.internal.pageSize.getWidth();
			// const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
			const pdfHeight = (imgProps.height / imgProps.width) * pdfWidth;
			// const pdfHeight = pdf.internal.pageSize.getHeight();
			console.log(imgProps.width, pdfWidth, pdfHeight, pdf.internal.pageSize.getHeight());
			pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight, 'NONE', 'FAST');
		}

		async function convertToPDF() {
			const pdf = new window.jspdf.jsPDF();

			await addPage('page1', pdf);
			pdf.addPage();
			await addPage('page2', pdf);
			pdf.addPage();
			await addPage('page3', pdf);

			pdf.save('converted.pdf');
		}
</script>

訪問頁面，點(diǎn)擊按鈕即可下載 pdf 了，內(nèi)容如下：