ekoopmans / html2pdf.js Goto Github PK

Hello @eKoopmans

Firstly, I want to thank you for writing this great file. It saves me a lot of time dealing with the creation of PDF with HTML.

Now I need to create only one PDF page with the HTML (If HTML is more, then it should automatically resize or reduce the font size but it should be only in one page). Is there any inbuilt feature for it. If yes pls let me know how can it be possible.

Thanks

Good morning

I have the following layout of a HTML element that I am putting into a PDF using html2pdf

<outer-div>
	<inner-div>Some content</inner-div>
	<inner-div>Some content</inner-div>
	<inner-div>Some content</inner-div>
	<inner-div>Some content</inner-div>
	<inner-div>Some content</inner-div>
	<inner-div>Some content</inner-div>
	<inner-div>Some content</inner-div>
	<inner-div>Some content</inner-div>
	.....
</outer-div>

After a specified number of inner-divs (like 25), I append a div with the class html2pdf__page-break to add a page break - and then continue to append the remaining inner-divs to be continued on the second page.

The problem is that the first page is now empty and just the remaining content shows up on the second page.

Am I missing something here?

Hi, I wanna use this lib..
but have some problem..
becouse, Can't display url image...
how can i fix it....

please check here
https://jsfiddle.net/syy12/7w9nudsc/

Hi @eKoopmans,

Firstly, I want to thank you for writing this great file. It saves me a lot of time dealing with the quality of content and layout. Recently, I was playing around with this file and vue js and found an issue:

https://jsfiddle.net/rover1234/woa5ucyx/

In two tests in the link, I created a simple for loop which shows 5 texts on the screen, and it is fine to output to a pdf file with 5 pages which show these texts since I apply your page break. However, in the second test, it failed to show the content of more than 20 texts which are all blank pages even though the page break still works fine.

I am not sure about this case. Is it because the picture generated from canvas is too large? and how could I find a way to get away from it (like creates multiple elements to generate different pdf content and combine everything into one file)?

Thanks

Hi eKoopmans, hope you're doing well
Is there a way to call setDisplayMode from jsPDF when using html2pdf?
Our code is basically doing this:
...
var parameters = {
margin: 0,
filename: 'test_jpeg.pdf',
image: { type: 'jpeg', quality: 1 },
html2canvas: { dpi: 192 },
jsPDF: { unit: 'mm', format: [ width, height], orientation: 'portrait' }
};
html2pdf(table, parameters);
...
But in addition we would like to call setDisplayMode to configure layout='single' and pmode='UseOutlines'

Many thanks in advance

Hi,

Is it possible to add font support which are used in HTML ? like font icons, open sans, etc

Regards,
Ajay

Hi,

Since jspdf and html2canvas are available as npm packages. Do we have npm package for this as well?

You are using a forEach() loop on a nodelist in the pagebreaks section:

// Enable page-breaks.
    var pageBreaks = source.querySelectorAll('.html2pdf__page-break');
    var pxPageHeight = pageSize.inner.height * pageSize.k / 72 * 96;
    pageBreaks.forEach(function(el) {
      el.style.display = 'block';
      var clientRect = el.getBoundingClientRect();
      el.style.height = pxPageHeight - (clientRect.top % pxPageHeight) + 'px';
    }, this);

This is not part of any JS standard, and not supported by any MS browser causing a console error and failure of pdf generation.

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

I got around this using a polyfill in my code:

(function () {
    if ( typeof NodeList.prototype.forEach === "function" ) return false;
    NodeList.prototype.forEach = Array.prototype.forEach;
})();

But this isn't really a good solution to have to put polyfills into my own code for this problem..

We generate 1 page PDF and users need to print 2 copies of it. They need to adjust the printing quantity from the typical "1" to "2".
But very often users forget to do that and print 1 copy instead of 2. Therefore would love to show a 2 page PDF instead of 1.
Content would be exactly the same on both pages, but I don't want to duplicate HTML so that in case of editing we wouldn't need to edit it in 2 locations on the same HTML.

It can export html to pdf without image the first is my code the secondimg is pdf . and the thirdis html

I use img

in my html .

Hi, first of all if you don't mind I'll use this issue to praise you. This custom build has saved me from having a meltdown after hours of fiddling with html2canvas & jsPDF.

It would be great if you could add jsPDF's autoPrint option which can be useful in some cases.

This is how I implemented it, not sure if it's the best solution, but it works for me:

if (opt.autoPrint) { pdf.autoPrint(); window.open(pdf.output('bloburl'), '_blank'); return; }

Does this works perfectly with mobile devices ??

Good morning, Recently faced 1 issue related to check box.

Scenario:- In my html i have 2 check boxes and selected the values based on task. In HTML preview can view the status (checked / Unchecked). When generating PDF from Chrome/ Mozilla browsers i can view the checked (Tick) mark while i do the same in IE (HTML preview shows checked) but after generating PDF the checkbox shows empty(unchecked).

Sample code -$("#checkboxfield").attr("checked", true).prop("checked", true);

Waiting for your reply. Have a nice day.

Hi there.
At first, thank you for your script, I think this is great.
Second, I need to know is there oportunity to include image into PDF file. I've tried, but there is only white empty space instead of image.

When I'm trying to put <div> with image background, I've this error:
Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at Function.html2pdf.makePDF (file:///C:/Users/%D0%94%D0%B5%D0%BD%D0%B8%D1%81/Desktop/test%20JS%20send%20mail/html2pdf/html2pdf.js:197:32) at Object.opt.html2canvas.onrendered (file:///C:/Users/%D0%94%D0%B5%D0%BD%D0%B8%D1%81/Desktop/test%20JS%20send%20mail/html2pdf/html2pdf.js:80:16) at file:///C:/Users/%D0%94%D0%B5%D0%BD%D0%B8%D1%81/Desktop/test%20JS%20send%20mail/html2pdf/html2canvas.min.js:8:11854

Thank you in advance.

I need to add the page number in a format like:

Page 1 / 3
Page 2 / 3
Page 3 / 3

is there a way to do this?

Hello @eKoopmans,

I'm trying to generate a pdf from a div containing a form + tables. When I generate it, the tables are OK but it's not showing the info inside the inputs of the form (and they have disabled text content). What is wrong with that text? Am I missing something? The div I'm sending has all the info.

Thanks in advance!

Hi,
I've got a page with an HTML table on it, set to 100% width on the page. I'd like to output the table into a PDF which fits the table to the width of the page and the document will create as many pages as is necessary for the whole table. My code is as follows:

html2pdf($('div.node-content')[0], {
      filename:     'myReport.pdf',
      margin:       0,
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { dpi: 192, letterRendering: true },
      jsPDF:        { format: 'a4', orientation: 'p' }
});

I've found that the table does not fit the PDF page width and a couple of columns on the right of the table are clipped off. I've experimented with the format option in the jsPDF setting as well as the margin option but I can't seem to affect this behaviour.

Any thoughts on how to do this would be much appreciated.
John

hello @eKoopmans I used your library and no doubt i have to accept this is the best thing for generating pdf and resolve so many problems of mine code with just 4 5 lines. One thing is giving me a problem which i think missing on my side. When i was using just html2canvas along with jsPDF to generate there were many problems but the chart was printing now after using your library, Chart which is producing in a canvas by Chartjs library it is not printing on pdf. Any solution? this is what i am doing.

var element = document.getElementById('main_data_div'); html2pdf(element, { margin: 0, filename: 'myfile.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { dpi: 192, letterRendering: true }, jsPDF: { unit: 'in', format: 'a4', orientation: 'l' } });

There is canvas element in my main_data_div

Hi @eKoopmans
first of all, thank you for an amazing tool for creating PDFs, I appreciate the quality settings and simplicity of its usage!

The issue I am solving right now is how can I set the canvas (or an image of it) to the same size as the page of pdf has.

I am trying something like this:
html2canvas: { dpi: 192, letterRendering: true, width: docWidth, height: docHeight }
jsPDF: { unit: "mm", format: [docHeight, docWidth], orientation: "p" }
or this:
image: { type: 'jpeg', quality: 1, width: docWidth, height: docHeight }

The second one is invalid, image width or height cannot be changed here, the first one gives strange results - the screenshot appears to be scaled but its position is shifted.

My overall goal is to get a screenshot of the html element - which I am getting. But this screenshot should be of the same size as pdf document is and fit to the page perfectly (that means it is placed at coordinates (0,0) of the document page).

How can I achieve this?
Thanks for your response.

Hi,

First of thanks for the great jsPDF and html2canvas wrapper. The most amazing thing is it's hassle free links within PDF.

I am having a problem with renderng rich HTML which I am fetching from a WYSIWYG area using jQuery text editor http://jqueryte.com/ but when it's rendered inisde HTML table there is only whitespaces in place of ol, ul and li.

Can you give me direction how to cope with this?

Many thanks,
Faisal

When using jsPDF on it's own, you can use a callback function parameter when initializing to perform tasks once the PDF is created. With html2pdf, there is no way to pass in this callback function. I've had to resort to using a timer to do some DOM cleanup tasks after PDF generation that would normally be put in a callback. It would be nice if we could pass a callback function into the jsPDF object options parameter when calling html2pdf.

When text areas are rendered in the PDF, if the content large then the text is cropped, resulting in half a line of text.
cropped_textarea.pdf

Below is the code we use to save the html element as a PDF

`viewModel.SaveHtml2Pdf = function() {
var element = $('div.data-entry-form:first');
var source = element[0];

var username = $('a.user-name:first').text().replace(/\s+/g, '').replace(/"/g, '');
var friendlyForm = friendlyFormName(viewModel.FormType());
var formid = viewModel.FormData.Id();

html2pdf(source,{
    margin: 20,
    filename: 'complianceform.pdf',
    image: { type: 'jpeg', quality: 1 },
    html2canvas: { dpi: 300, letterRendering: true },
    jsPDF: { unit: 'mm', format: 'A4', orientation: 'portrait' },
    jsPDFProperties: {
        title: 'CAFE Compliance Form',
        subject: friendlyForm + ' - ' + formid,
        author: username,
        keywords: 'CAFE, cafe, compliance, ' + friendlyForm,
        creator: 'CAFE'
    },
    title: 'CAFE - ' + friendlyForm + ' - ' + username
});

};`

FYI @eKoopmans - core issue in jsPDF - parallax/jsPDF#1220

My HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
    <script src="lib/html2canvas.min.js"></script>
    <script src="lib/html2pdf.js"></script>
</head>
<body>
    <div id="element-to-print">
        Hello People
    </div>
    <script type="text/javascript" src="./index.js"></script>
</body>
</html>

My JS:

var element = document.getElementById('element-to-print');
const options = {
    margin: 10,
    filename: pdfFileName,
    image: {
        type: 'jpeg',
        quality: 0.98
    },
    html2canvas: {
        dpi: 192,
        letterRendering: true
    },
    jsPDF: {
        unit: 'in',
        format: 'letter',
        orientation: 'portrait'
    }
}

html2pdf(element, options);

Above code setup give same "white paged aka empty" PDF file.

If I do comment unit/format lines, all works good.

Hi Erik Koopmans,

The download is working fine, for both Chrome and Firefox.
But in IE (Edge, 10) it is not working.can help to see this issue.

we try to get file as binary using pdfCallback gust updated but we face issues ,
how we can use pdfCallback ,

it view error Type undefined

our script

<script src="js/jspdf.js"></script>

<script src="js/html2canvas.js"></script>

<script src="js/html2pdf.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {
 exportIt();
   function myCallback(pdf) {
  	console.log('RUN')
  }
    function exportIt() {
   	 var element = document.getElementById('page-content-pdf');

  	html2pdf(element, {
  	  margin:       0.2,
  	  image:        { type: 'jpeg', quality: 1},
  	  pdfCallback: myCallback,
  	  html2canvas:  { dpi: 192, letterRendering: true ,scale: 2},
  	  jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
  	});
  }

});

</script>

If I have an accordion or tab element, would it be possible to create a pdf with certain elements of a class particular class?
for example this fiddle: https://jsfiddle.net/o0kL8zkk/12/ has the first two tabs with a class of "print-this". Is there a way to only make a pdf only of those particular tabs?
Also, there are some problems that I need to understand better:

1. html2pdf only makes pdfs of images
2. (deriving from 1) everything made pdf needs to be seen, you can't have a pdf of an element with a class of "hidden" in css?

Hi @eKoopmans, how are you?
When trying to use the latest version of the jspdf.js library I'm getting this error:
TypeError: pdf.addImage is not a function

Checking the jspdf.min.js I'm currently using it seems that it was customized by you. Am I right?
Also, it seems that many other scripts where added to the same js file.

Is there a way to use the latest versions of jspdf.js and html2canvas.js with html2pdf?
If not, can you provide me the jspdf.js (not the min version) file you're using?

What I'm trying to do is to use the setDisplayMode function provided into the jspdf library. For this I think I will need to modify jspdf.js or make an adjustment to html2pdf.js.

Please let me know your thoughts about this.

Many thanks!

Sorry I didnt know how to just say thank you for this.
GOD BLESS YOU MY SONS !

Has anybody gotten this library to work with RequireJS?

I wonder if with this plugin it's possible to obtain saving multiple page pdf with variable content, like in following example:

I got my desired html element:
var targetElement = document.getElementById("elementIWantToHaveInPDF");

then

1. I want to add a screenshot of this element to the first page of my pdf (at this point not to save it just ad an image (but your function html2pdf will save it immediately)).

2. After this I change element's content, like this:
targetElement.innerHTML = "some new content";

3. I want to add a screenshot of the element with new content to the next page of the pdf.

4. Finally I want to save my pdf. It should contain these two pages with screeshots of my element with different content.

Thanks for advices and response.

The pxPageHeight variable used to determine the pixel height of blank space to insert on a page break, is calculated wrong if you initialize the jsPDF options object with { unit: 'px' }. The calculation currently used is:

var pxPageHeight = pageSize.inner.height * pageSize.k / 72 * 96;

This calculation works fine if jsPDF options is set with inches as the unit value, but starting with pixels turns this into a complete mess. I haven't tried with other unit types yet, but expect similar results.

To breakdown your calculation as I understand it, pagesize.inner.height is the page height value returned from jsPDF, in the units specified in the options init. pageSize.k is also send from jsPDF and is the conversion ratio to convert inner.height to pt units. 72 is the number of pt units in an inch, and 96 is the number of pixels in an inch.

So, if I initialize jsPDF in px units, with landscape mode and a paper size with a height of 816px (corresponds to 8.5 inches with standard conversion factor of 96px per inch) pxPageHeight ends up calculating as:

816 * 1.33333333333333 / 72 * 96 = 1450.66 px

As the page is initialized with 816 px height, now html2pdf incorrectly thinks the page height is 1450px, and makes a mess of the page breaks!

To get around this, I initialized jsPDF unit option with 'in', as the calculation works fine converting inches to pixels, but not pixels to pixels; Since 'px' is a valid unit option for jsPDF, I think it should be accommodated in the calculation, and also tested for validity against all other unit types.

When initializing html2pdf with 'png' as the image type option, file sizes are approx. 32 times larger than using 'jpeg' at 100% quality. Adjusting the 'quality' option doesn't have any effect on the filesize when using type 'png', it remains constant at all levels.

Hi.

First of all, congratulations about your work. It´s amazing.

I would like to know if with your library is it possible to get the output directly to a var?

For example, with pure jsPDF:

var doc = btoa(pdf.output());

I use it to send as binary to the server, and then attach it to an email.

Otherwise, Do you think is it possible to improve/include, next version?

Sorry my english, please.

Thanks in advance. Best regards.

How can I use it on html content with ecoding UTF-8?

@eKoopmans not sure if this is an issue (yours or jsPDF) or designed feature.

My HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
    <script src="lib/html2canvas.min.js"></script>
    <script src="lib/html2pdf.js"></script>
</head>
<body>
     <div id="element-to-print">
        <span>I'm on page 1!</span>
        <div class="html2pdf__page-break"></div>
        <span>I'm on page 2!</span>
    </div>
    <script type="text/javascript" src="./index.js"></script>
</body>
</html>

So having this

<span>I'm on page 1!</span>
<div class="html2pdf__page-break"></div>
<span>I'm on page 2!</span>

WITH NO custom CSS code gives me a hint I would expect just text on 2 pages.

My JS:

var element = document.getElementById('element-to-print');
const options = {
    margin: 10,
    filename: pdfFileName,
    image: {
        type: 'jpeg',
        quality: 0.98
    },
    html2canvas: {
        dpi: 192,
        letterRendering: true
    },
    jsPDF: {
        orientation: 'portrait'
    }
}

html2pdf(element, options);

Soch code gives me PDF, and I see some vertical line in content.
This is how Chrome PDF viewer shows:

And this is how Adobe Reader on MacOS shows:

Left aligned from the text, and among whole pages I see vertical line, presumably left-broder, etc.

@eKoopmans will u agree with me, that my expectation TO NOT have that line does at least some sense?

Not sure if it's specific to my implementation, but I've noticed that the running html2pdf completely freezes the UI. Perhaps this can be fixed by running the conversions in a separate thread via service workers. Would be great if this lib did it so I don't have to implement it myself. ;)

Great job making this btw. I'm on the pdf-callback branch and it's a good addition. Just curious for the reason to not merge it into master?

In every page can we make static Header and footer

While using the latest jspdf & html2pdf js files, downloading the pdf from any browser(here i used chrome). In my HTML i have 15 pages (while downloading data visible all blank pages). I Tested with different trials then upto 7 pages html we can view download as pdf. Above 7 pages we are getting blank pages.Can anyone resolve this. please update.

Hey there,

I'm trying to generate a PDF using your plugin, which seems to fit exactly what I wish to do, but had some troubles in the output.
I first used the original dependencies (jsPdf & html2canvas) and had a bad quality PDF (text was blurred).
So I've included your custom dependencies in my project (in your vendor folder), and noticed the new "dpi" feature which solved my blur problem (great !).
But now, the generated canvas is trimmed (which was not the case before updating dependencies).
If I set an height and width in html2canvas, about 1/4 of the right side of the pdf is trimmed (so 1/4 of the content was missing and replaced with a large blank line).
If I don't set any width/height, the same part is trimmed, but not filled with blank (actually, the canvas is bigger than the pdf, so 1/4 of the bottom of 1st page goes at the top of page 2, and 1/4 of the right edge does not appear in the pdf).

Here is a CSS sample:

#pdfContent {
    border: solid 1px black;
    background-color: white;
}
.page {
    height: 1448px;
    width: 1024px;
}

HTML:

<div id="pdfContent" class="container noPadding">
  <div class="page bluebg">
    <div class="cadre" style="text-align: center">
      <span>Beginning of the PDF (centered) 0123456789012345678901234567890123456789012345678901234567890123456789</span><br/>
    </div>
    <div class="cadre">
      <span class="e">this is Elec text</span><br/>
      <span class="g">this is  Gaz text</span><br/>
      <span class="b">this is  Bi text</span><br/>
      <span class="bold">this is a bold text</span><br/>
      <span>an img containing SVG asset: 
        <img id="img_picto_header_gauche" src="assets/img/Metiers/ic_BCHTR_e.svg" style="width: 40px; height: 40px"/>
      </span><br/>
      <span>another img containing SVG asset: 
        <img id="img_picto_footer_centre" src="assets/img/Metiers/ic_ENTCORP_e.svg" style="width: 40px; height: 40px"/>
      </span><br/>
      <br/>
    </div>
  </div>
  <div class="page" style="text-align: center">
    <span>Page 2 !</span><br/>
  </div>
  <div class="page redbg" style="text-align: center">
    <span>Page 3 !</span>
  </div>
</div>

TS code:

    let nbPages = 3;
    let sourceHtml = $('#pdfContent');

    // doc html2pdf: https://github.com/eKoopmans/html2pdf
    html2pdf(sourceHtml[0], {
      margin: 1,
      filename: 'test-' + DateUtils.generateTimeStamp() + '.pdf',
      image: { type: 'jpg' },
      html2canvas: { dpi: 192, letterRendering: true, width: 1024, height: 1448 * nbPages },
      jsPDF: { unit: 'pt', format: 'a4', orientation: 'portrait' }
    });

here is the generated HTML (in a browser):

here is the generated PDF when no width/height is specified in html2canvas (the bad quality is from my screenshot, not from the pdf):

here is the generated PDF when width/height is specified in html2canvas, which is the same as the CSS size (the bad quality is from my screenshot, not from the pdf)

I'm having troubles debugging the minified version of html2canvas including your dpi patch, so I wonder if you have the unminified version so I could find out why the canvas is trimmed ?
Or if you have any idea yourself about the issue ?

Thanks,
Alban

Hello @eKoopmans

I'm having problems with the fonts when I export the html to pdf. The pdf has some font different than the one I'm using in the web page.
Could you please assist me?
I'm new in this world of JavaScript so it is possible I'm doing something wrong.

Here's my code:
(I'm really sorry but I don't know how to paste my code without turn it as a web so I'm gonna try to explain it)

• I included the files in the order you mentioned:

• I have a header h1:
  A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

• A paragraph into a div id="div1" tag
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

• And a button "Export" to execute the JS
  button id="attr" onclick="print_pdf()" Export /button

css:

h1 { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }

#div1 {
border: 1px solid black;
background-color: lightblue;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 20x;
color: #FF0000;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 15px;
padding-right: 15px;
}

my JS:

function print_pdf() {
var element = document.body;
var parameters = {
margin: 1,
filename: 'myfile_png.pdf',
image: { type: 'png' },
html2canvas: { dpi: 192, letterRendering: true },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf(element, parameters);
}

Thank you in advance for your time.

Hello @eKoopmans,

thank you again for such a great tool. I was wondering if you you or anyone has encountered this problem. I am using html2pdf lib to produce a PDF where the html is dynamic and changing. I have tried adjusting the margins but for some cases, when the text within the html is long and needs to go onto the next page, the text on the last line is sliced. Here is an example of what I mean: Is it possible that this might be due to the docHeight of the canvas as mentioned in #6?
This is how I am producing the pdf:

html2pdf(pdf_element, {
	 margin: [0.8, 1, 0.5, 1],
	 filename: pdf_name,
         image: { type: 'jpeg',quality: 0.98 },
         html2canvas: { dpi: 192, letterRendering: true },
         jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
});

When I use the page break functionality, they are placed exactly where I want them, but the document gets cropped at the bottom by the amount of space added by the page breaks.

Unfortunately this is resulting in an approval element being omitted from the pdf.

form_nopagebreaks.pdf
form_pagebreaks.pdf

Below is the code we use to save the html element as a PDF

`viewModel.SaveHtml2Pdf = function() {
var element = $('div.data-entry-form:first');
var source = element[0];

var username = $('a.user-name:first').text().replace(/\s+/g, '').replace(/"/g, '');
var friendlyForm = friendlyFormName(viewModel.FormType());
var formid = viewModel.FormData.Id();

html2pdf(source,{
    margin: 20,
    filename: 'complianceform.pdf',
    image: { type: 'jpeg', quality: 1 },
    html2canvas: { dpi: 300, letterRendering: true },
    jsPDF: { unit: 'mm', format: 'A4', orientation: 'portrait' },
    jsPDFProperties: {
        title: 'CAFE Compliance Form',
        subject: friendlyForm + ' - ' + formid,
        author: username,
        keywords: 'CAFE, cafe, compliance, ' + friendlyForm,
        creator: 'CAFE'
    },
    title: 'CAFE - ' + friendlyForm + ' - ' + username
});

};`

Thankyou for the great library.
I want to export a page with chart created with chartist.js.
But when exporting it to pdf only the labels in PDF but there is no chart.
Here am adding a JS Fiddle that will reproduce the issue
I request you to have a look and help me to solve the same.

Hi, While using HTML to PDF (for testing i used the link- [https://jsfiddle.net/o0kL8zkk/] and add my HTML, CSS and Script. FYI- HTML have 15 pages of huge data.(Data having checkboxes, Text boxes, text areas.. etc)
Scenarios:- (Tested in IE 10 Only)

1. when added upto 5 pages of data - PDF geneartes (good)
2. When added after 5pages to 8 pages - PDF geneartes (upto 5 pages data shows later data is showing blank pages).
3. When Data added upto 9 pages - PDF is not generates.

So. Now explain how can i acheive this. Thanks in Advance.

In IE 10 & above the PDF file is downloads, but (Ex:- Out of 14 pages data only 11 pages are downloaded and in that 5 pages data are visible and remaining pages visible black screen )

Hi,

thanks for your awesome library. What i'd like to achieve is to embed proxy html2canvas rpoperties for allowing static google maps to be included into the pdf. So far i tried to do something like this, but this way the rendering includes just the static html (such as table borders, not including php db query responses, static images and google map).

Thanks

`

<script type="text/javascript">	
           html2pdf(document.getElementById('mainpage'),{
		html2canvas: {
			logging: true,
			proxy: "EXTRA/html2pdfJS/html2canvasproxy.php",
			onrendered: function(canvas) {
                var img = new Image();
                    img.onload = function () {
                        img.onload = null;
                        document.getElementById("mainpage").appendChild(img);
                    };
                    img.src = canvas.toDataURL("image/png");
            }
		}
	});
</script>`

Hello,

Thank you very much for this project,
I want to know if we can have a selectable text in the PDF file ? ( as my test I got only a jpeg image under a PDF file).
Also I noticed a bug when testing, when I use a rotate image, it's cropped from the bottom and right and not positionned correctly, please see the attached file, (Preview from browser and the final result with pdf)

myfile-2.pdf

Thank you very much,

This function created PDF and save to a file

html2pdf.makePDF(canvas, pageSize, opt);

How can I to get PDF as File, for example, if I want to send it to email?

Hi, I used page breaks for page splitting. but the data in pages is getting dynamically. so, we don't know how much data is getting while generating PDF. The Text or images breaks in middle.

Hi Erik,
Love using your tool but I am running into some issues when using the tool on different browsers. If I reference to your version of jspdf in the Vendor folder I get the following error:
Chrome:
html2pdf.js:393 Uncaught ReferenceError: jsPDF is not defined
at html2pdf.js:393
Firefox:
ReferenceError: jsPDF is not defined[Learn More] html2pdf.js:393:1
https://cosmos.surrey.ca/external/tools/SiteSelector/report/html2pdf.js:393:1
IE11:
SCRIPT5009: 'html2canvas' is undefined
File: html2pdf.js, Line: 35, Column: 1

When I reference js2pdf from the the actual build: https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js
it works fine in Chrome and Firefox but in IE I get the following error.
SCRIPT5009: 'html2canvas' is undefined
File: html2pdf.js, Line: 35, Column: 1

Do you have any insight as why this might be happening.

Cameron