首頁 >web前端 >js教程 >如何使用 JavaScript 和 jsPDF 從 HTML Div 產生 PDF？

如何使用 JavaScript 和 jsPDF 從 HTML Div 產生 PDF？

Linda Hamilton原創: 2024-11-30 02:01:11361瀏覽

How Can I Generate a PDF from an HTML Div Using JavaScript and jsPDF?

使用JavaScript 從Div 中的HTML 產生PDF

問題

您的HTML 程式碼包含您想要的id 為「pdf」的div使用JavaScript 列印到名為「foobar.pdf」的PDF 檔案。但是，jspdf 只接受字串值，沒有列印 HTML 的功能。

解決方案

要啟用 jsPDF 列印HTML，您需要在您的應用程式中包含以下外掛程式項目：

jspdf.plugin.from_html.js
jspdf.plu gin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js

此外，如果您想要忽略中的某些元素HTML，您可以用 ID 標記它們，然後使用 jsPDF 中的特殊元素處理程序從列印中排除這些元素。例如，帶有被忽略元素的更新後的HTML 程式碼：

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

JavaScript 程式碼

此JavaScript 程式碼將產生包含「pdf」div 內容的PDF 並在新視窗中：

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

註解

元素中只能使用元素ID進行排除處理程序。不支援類別選擇器。
jsPDF 忽略 CSS 樣式，但它可以格式化標題（h1、h2 等）和文字節點內的文字。不支援列印文字區域等元素。

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

JavaScript css html print String if for format include using class function

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：5 如何在React Native中新增自訂圖標下一篇：5 如何在React Native中新增自訂圖標

看更多