使用Javascript从div中的HTML生成pdf [英] Generate pdf from HTML in div using Javascript
问题描述
我有以下HTML代码：
I have the following html code:
<!DOCTYPE html>
<html>
<body>
<p>don't print this to pdf</p>
<div id="pdf">
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
我想做的就是打印到pdf中找到的任何ID为 PDF格式。这必须使用JavaScript完成。然后应该使用文件名foobar.pdf自动下载pdf文档。
All I want to do is to print to pdf whatever is found in the div with an id of "pdf". This must be done using JavaScript. The "pdf" document should then be automatically downloaded with a filename of "foobar.pdf"
我一直在使用jspdf执行此操作，但它是唯一的功能是text，只接受字符串值。我想将HTML提交给jspdf，而不是文本。
I've been using jspdf to do this, but the only function it has is "text" which accepts only string values. I want to submit HTML to jspdf, not text.
推荐答案
jsPDF能够使用插件。为了使其能够打印HTML，你有包括某些插件，因此必须执行以下操作：
jsPDF is able to use plugins. In order to enable it to print HTML, you have to include certain plugins and therefore have to do the following:
- 转到https://github.com/MrRio/jsPDF 并下载最新版本。
- 在项目中包含以下脚本：
- jspdf.js
- jspdf.plugin.from_html.js
- jspdf.plugin.split_text_to_size.js
- jspdf.plugin.standard_fonts_metrics.js
- Go to https://github.com/MrRio/jsPDF and download the latest Version.
- Include the following Scripts in your project:
- jspdf.js
- jspdf.plugin.from_html.js
- jspdf.plugin.split_text_to_size.js
- jspdf.plugin.standard_fonts_metrics.js
如果要忽略某些元素，则必须使用ID标记它们，然后可以在jsPDF的特殊元素处理程序中忽略该ID。因此，您的HTML应如下所示：
If you want to ignore certain elements, you have to mark them with an ID, which you can then ignore in a special element handler of jsPDF. Therefore your HTML should look like this:
<!DOCTYPE html>
<html>
<body>
<p id="ignorePDF">don't print this to pdf</p>
<div>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
然后使用以下JavaScript代码在PopUp中打开创建的PDF：
Then you use the following JavaScript code to open the created PDF in a PopUp:
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，只包括'打印到pdf'这一行。
For me this created a nice and tidy PDF that only included the line 'print this to pdf'.
请注意，特殊元素处理程序仅处理当前版本中的ID，这也在 GitHub问题。它声明：
Please note that the special element handlers only deal with IDs in the current version, which is also stated in a GitHub Issue. It states:
因为匹配是针对节点树中的每个元素完成的，所以我希望尽可能快地完成。在这种情况下，它意味着只有元素ID匹配元素ID仍然以jQuery样式#id完成，但这并不意味着所有jQuery选择器都受支持。
Because the matching is done against every element in the node tree, my desire was to make it as fast as possible. In that case, it meant "Only element IDs are matched" The element IDs are still done in jQuery style "#id", but it does not mean that all jQuery selectors are supported.
因此用.ignorePDF等类选择器替换#ignorePDF对我来说不起作用。相反，您必须为每个要忽略的元素添加相同的处理程序，如：
Therefore replacing '#ignorePDF' with class selectors like '.ignorePDF' did not work for me. Instead you will have to add the same handler for each and every element, which you want to ignore like:
var elementHandler = {
'#ignoreElement': function (element, renderer) {
return true;
},
'#anotherIdToBeIgnored': function (element, renderer) {
return true;
}
};
来自示例还声明可以选择a或li等标签。对于大多数用例来说，这可能有点无限制：
From the examples it is also stated that it is possible to select tags like 'a' or 'li'. That might be a little bit to unrestrictive for the most usecases though:
我们支持特殊的元素处理程序。使用jQuery样式的
ID选择器为ID或节点名称注册它们。 （＃iAmID，div，span等）
此时不支持任何其他类型的选择器（类别为
复合词）。
We support special element handlers. Register them with jQuery-style ID selector for either ID or node name. ("#iAmID", "div", "span" etc.) There is no support for any other type of selectors (class, of compound) at this time.
要添加的一件非常重要的事情是丢失所有样式信息（CSS）。幸运的是，jsPDF可以很好地格式化h1，h2，h3等，这对我来说已经足够了。另外，它只会在文本节点中打印文本，这意味着它不会打印textareas等的值。示例：
<body>
<ul>
<!-- This is printed as the element contains a textnode -->
<li>Print me!</li>
</ul>
<div>
<!-- This is not printed because jsPDF doesn't deal with the value attribute -->
<input type="textarea" value="Please print me, too!">
</div>
</body>
这篇关于使用Javascript从div中的HTML生成pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
