Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

jsPDF.html output very large fields in document.

See original GitHub issue

Hello there, i’ve been trying the jsPDF.html function, but it seems its outputting the html but in such large scale that it is unreadable. Am I doing something wrong? I’ve been using the lines from the documentation itself in my componnent. I am actually working with vue.js.

methods: {
  download() {
    var html = 
    `<body>
      <h1>This is Title</h1>
      <div>
          <p>this is test no.1</p>
      </div>
      <div>
          <p><b>This is test no.1</b></p>
      </div>
      <div>
          <p>This is test no.3</p>
      </div>
    </body>`;
    var doc = new jspdf();
    doc.html(html, {
      callback: function (doc) {
        doc.save();
      },
    });
  },
},

The code results its this file: generated.pdf

Issue Analytics

State:
Created 3 years ago
Comments:19 (2 by maintainers)

Top GitHub Comments

5reactions

kantsvermacommented, Jan 12, 2021

Solved the issues by adding this by adding wrapper div and css width in px. It work for me

var getContent = "<div style='font-size:11px; border:1px solid; background-color: rgb(239 240 240); padding: 05px 15px; width:300px;'>"+$('.description').html()+"</div>";

doc.html(getContent, {
callback: function () {
 window.open(doc.output('bloburl')); // to debug
},
x: 265,
y: 130
});

1reaction

shizzysticalcommented, Jun 4, 2021

You should specify some options. For example i am using const doc = new jsPDF('p', 'px', 'a3', true); while my content is set to width of 500px (centered). This is work for me perfectly. You should look at jsPDFOptions (Image Below) and just play with it. Only tricky option is format. format - It’s default page format. It can be “a3”, “a4” (default), “a5”, “letter”, “legal”. and also format can take array of 2 numbers ex: [2, 5]. you can look here for this - https://stackoverflow.com/questions/23104008/where-to-change-default-pdf-page-width-and-font-size-in-jspdf-debug-js

Top Results From Across the Web

jspdf forces pdf to fit in one place, but my pdf has a very large ...

I have a table that has 3 columns slno, name, age. Design your table according to your need. · If you have a...

jsPDF Demos

Examples for using jsPDF with Data URIs below. Go back to project homepage. Basic elements; Text elements; Graphic elements. Simple two-page text document....

jsPDF AutoTable example – Table to PDF - Phppot

By parsing the HTML table source, it outputs a PDF document that can be downloaded and saved. function generateTable() { var doc =...

jsPdf not working in Visualforce page for large documents

Here the jsPdf method is working for small sized document alone. For documents with more content its not responding. Do anyone know about...

Generate PDF at Client Side with jsPDF plugin – Part 3

What if my table data is too long and it is displayed wrapped on frontend side. ... We just have to keep this...