使用 Java Script 以 HTML 格式导出 DIV 区域内容

Question

How can export DIV area content from an HTML Page to PDF?.如何将 DIV 区域内容从 HTML 页面导出为 PDF？。

Is it possible using without third-party tool, using JavaScript?.是否可以在没有第三方工具的情况下使用 JavaScript？

Please suggest请建议

Answer 1

That is what I get: https://stackoverflow.com/a/24825130/3810453 when I ask to great-magician-google and clicked on FIRST link.这就是我得到的： https://stackoverflow.com/a/24825130/3810453当我询问 great-magician-google 并点击 FIRST 链接时。

jsPDF is able to use plugins. jsPDF 能够使用插件。 In order to enable it to print HTML, you have to include certain plugins and therefore have to do the following:为了使其能够打印 HTML，您必须包含某些插件，因此必须执行以下操作：

Go to https://github.com/MrRio/jsPDF and download the latest Version.去https://github.com/MrRio/jsPDF下载最新版本。 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

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.如果你想忽略某些元素，你必须用一个 ID 标记它们，然后你可以在 jsPDF 的特殊元素处理程序中忽略它。 Therefore your HTML should look like this:因此，您的 HTML 应如下所示：

<!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>

Then you use the following JavaScript code to open the created PDF in a PopUp:然后使用以下 JavaScript 代码在弹出窗口中打开创建的 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");

For me this created a nice and tidy PDF that only included the line 'print this to pdf'.对我来说，这创建了一个漂亮整洁的 PDF，其中仅包含“将其打印为 pdf”这一行。

Please note that the special element handlers only deal with IDs in the current version, which is also stated in a GitHub Issue.请注意，特殊元素处理程序仅处理当前版本中的 ID，这也在 GitHub 问题中说明。 It states:它指出：

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.在那种情况下，这意味着“仅匹配元素 ID” 元素 ID 仍然以 jQuery 样式“#id”完成，但这并不意味着支持所有 jQuery 选择器。

Therefore replacing '#ignorePDF' with class selectors like '.ignorePDF' did not work for me.因此，用“.ignorePDF”之类的类选择器替换“#ignorePDF”对我不起作用。 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;
  }
};

One very important thing to add is that you lose all your style information (CSS).要添加的一件非常重要的事情是您丢失了所有样式信息 (CSS)。 Luckily jsPDF is able to nicely format h1, h2, h3 etc., which was enough for my purposes.幸运的是 jsPDF 能够很好地格式化 h1、h2、h3 等，这对我的目的来说已经足够了。 Additionalyl it will only print text within text nodes, which means that it will not print the values of textareas and the like.此外，它只会打印文本节点内的文本，这意味着它不会打印 textarea 等的值。 Example:例子：

<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>

and no, you cant print without third-party-tool不，没有第三方工具你不能打印

使用 Java Script 以 HTML 格式导出 DIV 区域内容

问题描述

1 个解决方案

解决方案1
0 2014-09-08 14:26:05

使用 Java Script 以 HTML 格式导出 DIV 区域内容

问题描述

1 个解决方案

解决方案1 0 2014-09-08 14:26:05

解决方案1
0 2014-09-08 14:26:05