Shopify Question posted in
The Shopify help center can be found here.

PDF Generation from HTML page using JavaScript or Jquery Library or Plugin – Shopify

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

Tags:

2

Answers


  1. 0

    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/>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search