是否可以使用JavaScript或jquery将HTML页面保存为PDF？

Question

是否可以使用JavaScript或jquery将HTML页面保存为PDF？

详细地:

我生成了一个包含表格的HTML页面.它有一个按钮'另存为PDF'.如果用户单击该按钮,则该HTML页面必须转换为PDF文件.

是否可以使用JavaScript或jquery？

Answer 1

是,使用jspdf创建pdf文件.

然后,您可以将其转换为数据URI并将下载链接注入DOM

但是,您需要自己编写HTML到pdf转换.

只需使用打印机友好版本的页面,让用户选择他想要打印页面的方式.

编辑:显然它的支持很少

所以答案是编写自己的PDF编写器或者让现有的PDF编写器为您(在服务器上)执行此操作.

Answer 2

这可能是一个迟到的答案，但这是最好的：https : //github.com/eKoopmans/html2pdf

纯 JavaScript 实现。允许您仅通过 ID 指定单个元素并对其进行转换。

Answer 3

Ya很容易用javascript做.希望这段代码对您有用.

你需要JSpdf库.

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>

<script>
    var doc = new jsPDF();
    var specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true;
        }
    };

    $('#cmd').click(function () {
        doc.fromHTML($('#content').html(), 15, 15, {
            'width': 170,
                'elementHandlers': specialElementHandlers
        });
        doc.save('sample-file.pdf');
    });

    // This code is collected but useful, click below to jsfiddle link.
</script>

jsfiddle链接在这里

Answer 4

我使用jsPDF和dom-to-image库将 HTML 导出为 PDF。

我在这里发帖作为参考。

$('#downloadPDF').click(function () {
    domtoimage.toPng(document.getElementById('content2'))
      .then(function (blob) {
          var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);
          pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
          pdf.save("test.pdf");
      });
});

演示：https : //jsfiddle.net/viethien/md03wb21/27/

Answer 5

这是我将如何做到这一点,它的想法不是防弹设计,你需要修改它

• 用户单击"另存为PDF"按钮
• 使用ajax向服务器发送呼叫
• 服务器响应使用HTML生成的PDF的URL,我非常熟练地使用了Apache FOP
• 处理ajax响应的js执行location.href指向JS发送的URL,并且一旦该URL加载,它就使用内容处置标头作为附件发送文件,强制用户下载文件.

Answer 6

你可以使用Phantomjs.在此下载并使用以下示例测试html-> pdf转换功能https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js

示例代码:

phantomjs.exe examples/rasterize.js http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/xhtml/index.html sample.pdf

Answer 7

简而言之：不。第一个问题是对文件系统的访问，出于安全原因，大多数浏览器默认将其设置为“否”。现代浏览器有时支持数据库形式的简约存储，或者您可以要求用户启用文件访问。

如果您有权访问文件系统，那么保存为 HTML 并不那么困难（请参阅 JS 文档中的文件对象） - 但 PDF 就不那么容易了。PDF 是一种相当高级的文件格式，确实不适合 Javascript。它要求您以 Javascript 不直接支持的数据类型写入信息，例如单词和四边形。您还需要预先定义必须保存到文件中的字典查找系统。我确信有人可以让它工作，但所涉及的精力和时间最好花在学习 C++ 或 Delphi 上。

但是，如果用户给予您不受限制的访问权限，则应该可以导出 HTML