使用 JavaScript 或 Jquery 库或插件从 HTML 页面生成 PDF

Question

我正在尝试将 html 页面转换为 PDF，其中包含使用 css 样式设计的图像和一些数据表。 我尝试过 JSPDF 和 html2canvas 库，但图像没有显示在 PDF 中，而且它们不允许我在长页面上创建 PDF，因为我的 html 是动态的，它可以长成四页。 我在网上搜索了很多论坛，但找不到任何解决我问题的方法。 我正在实施的网站是 shopify 网站。 因此，任何与此参考有关的线索都可能有所帮助。 任何形式的帮助将不胜感激。 谢谢

Answer 1

检查此链接是否对您在Codepen上有用

https://codepen.io/massimo-cassandro/pen/qOrJNx

<html>
  <!-- donot consider this i put it just to allow the link-->
<html/>

Answer 2

将html的内容转换为图像，然后将其转换为PDF：

https://html2canvas.hertzen.com/

https://parall.ax/products/jspdf

 var doc = new jsPDF(); var specialElementHandlers = { '': function (element, renderer) { return true; } }; $('#btn-download').click(function () { html2canvas($('#container').html).then(function (canvas) { DownloadPDF(canvas) }); }); function DownloadPDF(canvas) { var imgData = canvas.toDataURL( 'image/png'); var doc = new jsPDF('p', 'mm'); doc.addImage(imgData, 'PNG', 10, 10, parseInt($(canvas).attr('width')) / 9, parseInt($(canvas).attr('height')) / 9); doc.save('name.pdf'); }

 #test { width: 500px; height : 500px; background-image: url("https://www.wikichat.fr/wp-content/uploads/sites/2/comment-soigner-une-plaie-dun-chat.jpg"); background-size: contain; background-repeat: no-repeat; } #btn-download { cursor:pointer; position:fixed; }

 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> </head> <body> <div id="btn-download">Download</div> <br/> <div id="container"> <div id="test"> </div> </div> </body> </html>

Answer 3

我为项目使用了支持向量的API ，它是addHtml()中不推荐使用的addHtml()的替代品，对我来说已经足够了。 从那里的链接检查他们的示例代码。 我使用html2canvas 1.0.0-alpha.11 。 旧版本可能无法正常工作。 这样的事情应该做。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
    function download() {
        let pdf = new jsPDF('p', 'pt', 'a3');
        pdf.html(document.getElementById('idName'), {
            callback: function (pdf) {
                pdf.save('test.pdf');
            }
        });
    }
</script>

使用 JavaScript 或 Jquery 库或插件从 HTML 页面生成 PDF

问题描述

2 个解决方案

解决方案1
0 2018-11-02 08:46:36

解决方案2
0 2018-11-02 09:09:01

解决方案3
0 2019-02-03 21:05:10

使用 JavaScript 或 Jquery 库或插件从 HTML 页面生成 PDF

问题描述

2 个解决方案

解决方案1 0 2018-11-02 08:46:36

解决方案2 0 2018-11-02 09:09:01

解决方案3 0 2019-02-03 21:05:10

解决方案1
0 2018-11-02 08:46:36

解决方案2
0 2018-11-02 09:09:01

解决方案3
0 2019-02-03 21:05:10