如何使用 JavaScript 從 Div 中的 HTML 產生 PDF？-js教程-PHP中文網

如何使用 JavaScript 從 Div 中的 HTML 產生 PDF？

Linda Hamilton

發布： 2024-12-08 10:51:13

原創

652 人瀏覽過

How to Generate a PDF from HTML within a Div using JavaScript?

使用Javascript從div中的HTML產生PDF

需要完成的任務是將div的內容與ID轉換將「pdf」轉換為PDF 文件。該 PDF 文件必須自動下載，文件名稱為「foobar.pdf」。

雖然 jspdf 通常用於 PDF 生成，但其文字功能限制提出了挑戰。它只接受字串值，而需要 HTML 輸入。為了解決這個問題，需要插件，例如jspdf.plugin.from_html.js和jspdf.plugin.split_text_to_size.js。以下是如何使用這些外掛程式來實現所需的結果：

首先將必要的腳本合併到您的專案中：

jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js

登入後複製

如果某些元素需要要從PDF 中排除，必須為它們指派一個ID，並在jsPDF 的特殊元素處理程序中進行識別。例如，若要排除 ID 為「ignorePDF」的元素，請修改 HTML 程式碼，如下所示：

<!DOCTYPE html>
<html>
  <body>
    <p>

登入後複製

以下 JavaScript 程式碼將產生 PDF並將其顯示在彈出視窗中window:

var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    });

doc.output("dataurlnewwindow");

登入後複製

此方法將建立一個包含文字「列印此到pdf。」

需要注意的是，特殊元素處理程式主要處理目前版本中的ID。因此，使用類別選擇器（例如“.ignorePDF”）不會產生預期的結果。

此外，jsPDF 缺乏對 CSS 樣式的支持，並且只會列印文字節點內的文字。因此，文字區域和類似元素的值不會包含在 PDF 中。

以上是如何使用 JavaScript 從 Div 中的 HTML 產生 PDF？的詳細內容。更多資訊請關注PHP中文網其他相關文章！