With too big margin x, y coordinates passed to text() func. downloaded PDF seems to be empty #1220

alundiak · 2017-05-03T17:55:06Z

I use jsPDF v1.3.4.

Here is my HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<body>
    <script type="text/javascript" src="./index.js"></script>
</body>
</html>

JS:

var doc = new jsPDF({
    orientation: 'landscape',
    unit: 'in',
    format: [4, 2]
});

doc.text('Hello world!', 10, 10);
doc.save('two-by-four.pdf');

or https://jsfiddle.net/landike/n55326zk/

What I saw
Empty PDF file - file with white page, but landscaped. I opened file with Chrome PDF viewer and Acrobat Reader.

What I expected
Landscaped PDF file with text "Hello world!".

I tested/verified on MacOS, on browsers: Chrome 58, Chrome Canary v60, Firefox 53, Safari 10.1.

When I comment lines

unit: 'in',
format: [4, 2]

downloaded PDF file contains "Hello world!".

So I may assume, that unit/format parsing is somehow wrong. Maybe for MacOS.

The text was updated successfully, but these errors were encountered:

eKoopmans · 2017-05-03T20:17:08Z

Hi @alundiak, you've used unit: 'in' and then placed the text at coordinates 10, 10, which is off the page (since you've defined the page as 4x2 inches). I believe that's the only problem!

alundiak · 2017-05-03T20:48:12Z

First of all, I decreased value of numbers in doc.text('Hello world!', 1, 1) and pdf is OK. Thanks @eKoopmans for good-eye-catching :)

The initial code suggested by readme.mdcontent (assumably by @MrRio) is in fact this:

var doc = new jsPDF({
  orientation: 'landscape',
  unit: 'in',
  format: [4, 2]
})

doc.text('Hello world!', 10, 10)
doc.save('two-by-four.pdf')

10, 10 <= u see, it right?

I've became the "first-time-consumer" of this library today, so I did simple copy of that code, assuming, that code is correct, and should show me how the magic happens.

If so, that I would suggest @MrRio review default code example/suggestion and change in readme file, so that people don't face with this issue. Strange, how none faced with this yet and did not reported here?! Either none use this lib yet (except @eKoopmans), or issue appears only in my case.

PS. Maybe there is some kind of sense, to provide additional check for inches value of margins. But I realize it depends on screen resolution, so it's tough, and better to give responsibility to end consumers, like in my example :)

eKoopmans · 2017-05-03T23:01:27Z

You're right, the readme has that mistake in it. The first example uses 10, 10 because it's using default units (mm), but in the second example it changes units to inches and pagesize to 2x4 while keeping the 10, 10 coordinates.

I'll make a pull request to update the readme, unless you'd rather make one yourself!

alundiak mentioned this issue May 3, 2017

With too big margin value (inches) downloaded PDF seems to be empty eKoopmans/html2pdf.js#1

Closed

alundiak changed the title ~~Simple code example downloads empty PDF file~~ With too big margin x, y coordinates passed to text() func. downloaded PDF seems to be empty May 3, 2017

eKoopmans mentioned this issue May 4, 2017

Update example to display text on-screen #1223

Merged

alundiak closed this as completed May 4, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

With too big margin x, y coordinates passed to text() func. downloaded PDF seems to be empty #1220

With too big margin x, y coordinates passed to text() func. downloaded PDF seems to be empty #1220

alundiak commented May 3, 2017 •

edited

Loading

eKoopmans commented May 3, 2017

alundiak commented May 3, 2017 •

edited

Loading

eKoopmans commented May 3, 2017

With too big margin x, y coordinates passed to text() func. downloaded PDF seems to be empty #1220

With too big margin x, y coordinates passed to text() func. downloaded PDF seems to be empty #1220

Comments

alundiak commented May 3, 2017 • edited Loading

eKoopmans commented May 3, 2017

alundiak commented May 3, 2017 • edited Loading

eKoopmans commented May 3, 2017

alundiak commented May 3, 2017 •

edited

Loading

alundiak commented May 3, 2017 •

edited

Loading