如何使用 JavaScript 或 jQuery 在客户端将 html 页面导出为 pdf？

Posted 2023-02-24

【中文标题】如何使用 JavaScript 或 jQuery 在客户端将 html 页面导出为 pdf？

【英文标题】：How to export a html page to pdf in client side using JavaScript or jQuery?

【发布时间】：2013-08-29 19:44:16

【问题描述】：

如果不可能，那么还有什么其他选择？

我尝试将完整的 html 页面转换为具有动态值的 pdf，但我不能。

但我看到了一些类似 jspdf 的 API，但它对我没有用。

是否可以使用 javascript 或 jQuery 将 HTML 页面保存为 PDF 文件？

详细说明：

我生成了一个 HTML 页面，其中包含一个动态填充所有可用报告的列表网格。它有一个按钮“另存为 PDF”。如果用户单击此按钮，则 HTML 页面将转换为 PDF 文件。

是否可以使用 JavaScript 或 jquery？

【问题讨论】：

您不能在客户端执行此操作，如果您想将完整的 html 页面转换为 pdf 也可能与 ***.com/questions/6896592 @ 重复，您至少需要一个 php 文件来为您生成一个 pdf 文件987654322@***.com/questions/10975694

Is it possible to save HTML page as PDF using JavaScript or jquery?的可能重复

您也可以在浏览器中使用打印功能，但它更有意义，并且始终可以使用 AJAX + 基于 PHP 的转换器，如 TCPDF

【参考方案1】：

jsPDF 有一个 HTML 渲染器，但处于早期阶段：

https://github.com/mrrio/jsPDF

http://parall.ax/products/jspdf

另一个解决方案可能是https://github.com/eKoopmans/html2pdf.js

但最好的解决方案是来自 mujaffars 的解决方案。用户 AJAX 和一个用 PHP 编写的稳定的 PDF 库，如 FPDF、PDFLib、TCPDF 等。

【讨论】：

他们仍然说 html 渲染器是实验性的，5 年后。

它们不支持 CSS，因此只能用于非常基本的 PDF。

@JDK92 答案已经快 9 岁了。现在可能有更好的解决方案。你知道有什么好的解决方案吗？

@DanielRuf 没错，但不幸的是没有太大变化。我找不到可靠的解决方案，对我来说最好的方法是使用浏览器中的“打印 -> 保存到 PDF”功能，因为它似乎可以很好地解释 CSS。

@JDK92 我同意。不幸的是，没有办法（由于安全原因）强制“pdf”作为打印机并触发最终的“打印”按钮。在我们的项目中，我们实现了一个“window.print()”调用，或者在后端有一些相当大的解决方案，比如 wkhtmltopdf 和类似的。

【参考方案2】：

好吧，如果我正确地回答了你的问题，那么你需要Export a Table Data as PDF？

如果是，请参阅datatables.js 的简单示例here。

另外，查看use BytescoutPDF.js (Bytescout PDF Generator for JavaScript) to draw PDF invoice 和JSPDF 可以获取详细信息here。

【讨论】：

但这并不是要转换一个完整的HTML页面但这并不是要将一个完整的HTML页面直接转换为PDF

【参考方案3】：

确实可以使用 pdf.js 插件 pdf.js 是一个 HTML5 实验，旨在探索在没有本机代码帮助的情况下构建忠实高效的 PDF 渲染器。

Online Demo

Github Link

JSFIDDLE DEMO

【讨论】：

pdf.js 只是读取PDF文件并从中生成HTML数据，所以mthis是错误的方向

【参考方案4】：

您需要使用任何 pdf 生成库。您尚未指定您正在使用哪种技术（Php、.net 或其他任何技术）

在 PHP 中你可以使用 tcpdf 库，你可以在其中传递 html 来生成 pdf

$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
$pdf->AddPage();
$pdf->writeHTML($pdfHtml, true, false, true, false, '');

$pdfHtml 将是您的页面 html

在您的情况下，当单击“另存为 pdf”按钮时，您可以使用 jquery 的 html() 方法获取 html

例如。

var pageHtml = $('html').html();

通过将pageHtml传递给ajax页面，您可以在ajax页面中创建pdf

【讨论】：

标题明确表示in client side，php、.net等服务器端技术是不行的。