使用 JavaScript 或 Jquery 库或插件从 HTML 页面生成 PDF
[英]PDF Generation from HTML page using JavaScript or Jquery Library or Plugin
问题描述
I am trying to convert an html page to PDF which contains images and some data-tables which as designed using css styles.
我正在尝试将 html 页面转换为 PDF，其中包含使用 css 样式设计的图像和一些数据表。 I have tried JSPDF and html2canvas libraries but the images don't show up in PDF and also they don't allow me to create PDF on long pages as my html is dynamic and it could grow into four pages.我尝试过 JSPDF 和 html2canvas 库，但图像没有显示在 PDF 中，而且它们不允许我在长页面上创建 PDF，因为我的 html 是动态的，它可以长成四页。 I have searched so many forum's online but unable to find anything which resolves my issue.我在网上搜索了很多论坛，但找不到任何解决我问题的方法。 The site in which i am implementing is shopify site.我正在实施的网站是 shopify 网站。 So any clue with this reference might help.因此，任何与此参考有关的线索都可能有所帮助。 Any sort of help will be highly thankful.任何形式的帮助将不胜感激。 Thanks谢谢
2 个解决方案
解决方案1
0 2018-11-02 08:46:36
check at this link if it can be usefull for you on codepen 检查此链接是否对您在Codepen上有用
https://codepen.io/massimo-cassandro/pen/qOrJNx https://codepen.io/massimo-cassandro/pen/qOrJNx
<html>
<!-- donot consider this i put it just to allow the link-->
<html/>
解决方案2
0 2018-11-02 09:09:01
Transform the content of your html into image and then transform it into PDF : 将html的内容转换为图像，然后将其转换为PDF：
https://html2canvas.hertzen.com/ https://html2canvas.hertzen.com/
https://parall.ax/products/jspdf 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>
解决方案3
0 2019-02-03 21:05:10
I used the vector-supporting API , a replacement of the deprecated addHtml() , from jsPDF for my project and it's good enough for me. 我为项目使用了支持向量的API ，它是addHtml()中不推荐使用的addHtml()的替代品，对我来说已经足够了。 Check their sample code from the link there. 从那里的链接检查他们的示例代码。 I use html2canvas 1.0.0-alpha.11 . 我使用html2canvas 1.0.0-alpha.11 。 Older version might not work. 旧版本可能无法正常工作。 Something like this should do. 这样的事情应该做。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.