PDF Generation from HTML page using JavaScript or Jquery Library or Plugin
Question
I am trying to convert an html page to PDF which contains images and some data-tables which as designed using css styles. 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. 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. So any clue with this reference might help. Any sort of help will be highly thankful. Thanks
2 answers
solution1
0 2018-11-02 08:46:36
check at this link if it can be usefull for you on codepen
https://codepen.io/massimo-cassandro/pen/qOrJNx
<html>
<!-- donot consider this i put it just to allow the link-->
<html/>
solution2
0 2018-11-02 09:09:01
Transform the content of your html into image and then transform it into 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>
solution3
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. Check their sample code from the link there. I use 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.