使用JavaScript将带有Javascript的HTML转换为PDF

Question

我想要将包含 JavaScript 的 HTML 转换成 PDF，怎样实现？

我只是想展示网页上的内容。我正在展示通过一个 JavaScript 库生成的甘特图。

现在我想将这个 HTML 网页保存为 PDF，该怎么做？

- g.revolution

---

Java与Javascript完全不同！ - Ikke

我知道，我想用Java或JavaScript解决方案。两者都可以接受。 - g.revolution

一些问题：Java已经存在于项目中了吗？Javascript是如何制作这个图表（图片、表格...）的，数据从哪里来？我认为你的问题不会有直接的解决方案。 - sinuhepop

Answer 1

我们正在寻找一种将带有复杂javascript的html文件转换为pdf的方法。我们的文件中包含document.write和DOM操作的javascript。

我们已经尝试使用HtmlUnit解析文件，并使用Flying Saucer渲染为pdf，但结果不够令人满意。它可以工作，但在我们的情况下，pdf与用户想要的还有差距。

如果您想尝试，请使用以下代码片段将本地html文件转换为pdf。

URL url = new File("test.html").toURI().toURL();
WebClient webClient = new WebClient(); 
HtmlPage page = webClient.getPage(url);

OutputStream os = null;
try{
   os = new FileOutputStream("test.pdf");

   ITextRenderer renderer = new ITextRenderer();
   renderer.setDocument(page,url.toString());
   renderer.layout();
   renderer.createPDF(os);
} finally{
   if(os != null) os.close();
}

- Serxipc

---

你的代码很棒...但正如你所提到的，它并不完美...那么，你有没有找到一些新的方法来提高PDF的质量？ - Narayan Subedi

如何在Visualforce页面中使用此代码？我需要在Salesforce Apex页面中使用。 - SFDC_Learner

Answer 2

我很惊讶没有人提到使用API来完成工作的可能性。

当然，如果你想保持安全，直接使用JavaScript在浏览器内将HTML转换为PDF并不是一个好主意。

但是你可以这样做：

当你的用户点击“打印”（例如）按钮时，你：

1. 向特定端点的服务器发送一个请求，其中包含要转换的详细信息（例如页面的URL）。 2. 然后该端点将数据发送到API进行转换，并收到PDF响应。 3. 最后将PDF返回给用户。

从用户的角度来看，他们只需点击一个按钮即可收到PDF。

有许多可用的API可以完成这项工作，有些比其他的更好（这不是我在这里的原因），通过谷歌搜索可以得到很多答案。

根据你的后端编写内容，你可能会对PDFShift（事实：我在那里工作）感兴趣。

他们为PHP、Python和Node.js提供了现成的工作包。你只需要安装包、创建帐户、指定API密钥就可以开始使用了！

API的优点在于它们能够在所有语言中良好地工作。你所需要做的就是发送一个请求（通常是POST），包含你想要转换的数据，然后获得一个PDF文件。并且根据你的使用情况，通常是免费的，除非你是一个重度用户。

- Cyril N.

Answer 3

通过浏览器的 打印... 菜单项，您可以使用像 PDFCreator 这样的 PDF 打印机驱动程序。这样，页面中包含的任何 JavaScript 都会在呈现页面时由浏览器处理。

PDFCreator 是一个免费的工具，可从几乎任何 Windows 应用程序创建 PDF 文件。

• 从任何能够打印的程序创建 PDF

- gimel

Answer 4

使用Docmosis或JODReports，您可以将HTML和Javascript提供给文档渲染过程，从而生成PDF、doc或其他格式。底层的转换是由OpenOffice执行的，因此结果将取决于OpenOffice导入过滤器。您可以尝试手动保存网页到文件，然后使用OpenOffice加载-如果看起来足够好，那么这些工具将能够为您提供与PDF相同的结果。

- Paul Jowett

Answer 5

看这个 http://www.techumber.com/2015/04/html-to-pdf-conversion-using-javascript.html

基本上你需要使用html2canvas和jspdf来实现它。首先，您将把dom转换为图像，然后使用jspdf创建带有图像的pdf。

编辑： 关于它如何工作的简短说明。 我们将使用两个库来完成此工作。http://html2canvas.hertzen.com/ 和 https://github.com/MrRio/jsPDF 首先，我们将使用html2canvas创建一个dom图像，然后使用jspdf addImage方法将该图像添加到pdf中。 看起来很简单，但是jsPdf和html2cavas中有一些错误，因此您可能需要暂时更改dom样式。 希望这可以帮助到你。

- Dimpu Aravind Buddha

Answer 6

将以下代码复制并粘贴到您的网站中，以提供一个链接，可将页面转换为PDF格式：

<a href="javascript:void(window.open('http://www.htmltopdfconverter.net/?convert='+window.location))">Convert To PDF</a>

- Jokin

Answer 7

你可以使用jQuery来实现它，

使用以下代码链接按钮...

$(document).ready(function() {
    $("#button_id").click(function() {
        window.print();
        return false;
    });
});

这个链接可能也会有帮助: jQuery打印HTML PDF页面选项链接

- Dusman

---

你能在回答中解释一下这是如何将HTML页面保存为PDF的解决方案吗？提问者并没有提到打印... - trincot

"10个jQuery打印页面选项"只是一个链接名称，该插件将HTML页面转换为PDF格式。然而，在插件中有一个名为“打印”的按钮，但它会生成一个PDF文件。 - Dusman

好的，如果您在回答中添加这些信息会很好，因为当提问者根本没有提到打印按钮时，阅读“使用此代码链接打印按钮...”会令人惊讶。 - trincot

这甚至没有使用 jQuery 插件。这是使用标准的 jQuery 等待 DOM 加载，然后绑定一个点击事件，调用本地窗口函数 print()。- 10,000 - mwilson

我知道这是一篇旧帖子，但它是“仅链接”答案不好的一个典型例子。链接已经失效了，所以这个答案基本上只是说“触发打印对话框显示”，这与问题的实际情况相差很远。 - M. Eriksson