CODEWITHSUNDEEP
angularjspdf
DeooK
DeooK

Reputation: 545

Angular 7: convert HTML to PDF

I'm trying to convert an HTML table to a PDF without success.

I've used jsPDF to do that but the result is really poor and I'm trying to understand why.

Considering I have a tablet, what I want is to have this table printed on A4 pages in landscape mode (using all the pages that are needed). My problem is that the PDF is composed by images (and I prefer text) and that images are in a really low quality.

What I've tryed is this:

const html = document.getElementById('resultTable');
const pdf = new jsPDF('landscape', 'px', 'a4');

pdf.addHTML(html, 0, 0, {
    'width': html.clientWidth,
    'height': html.clientHeight
}, () => { pdf.save('web.pdf'); });

I've already tried to use, as width and height, the size of the pdf page (with pdf.internal.pageSize) without success. And I've already tried to use 'pt' and 'mm' instead of 'px'.

Any ideas?

Upvotes: 5

Views: 21067

Answers (4)

Vladimir Prudnikov
Vladimir Prudnikov

Reputation: 7242

This is not so trivial task. On the server I tried using wkhtmltopdf but end up looking for a better solution, because with it I can't use all the power of CSS for printing. I think it is the same problem with client-side tools like jsPDF, you will not get an expected and consistent result.

Headless chrome in Google Cloud is my choice right now.

Here is a good overview of available tools and technologies Modern HTML to PDF conversion

UPDATE:

If you need to create a PDF and can't install anything on your server, you can do so by using Headless Chrome and Google Cloud Function.

using-puppeteer-in-google-cloud-functions

puppeteering-in-firebase-google-cloud-functions

UPDATE 2:

And by the way, you always have an option to Print to PDF in browser. However, I'm not sure how it works on Android tablets, Safari for iOS can export to PDF.

Upvotes: 2

dasunse
dasunse

Reputation: 3099

Use this way stackblitz working example

In yout typescript file

import {jsPDF} from 'jspdf';

@ViewChild('content', {static: false}) content: ElementRef;


public downloadPDF() {
   const doc = new jsPDF();

   const specialElementHandlers = {
      '#editor': function (element, renderer) {
       return true;
       }
   };

   const content = this.content.nativeElement;

   doc.fromHTML(content.innerHTML, 15, 15, {
      width: 190,
     'elementHandlers': specialElementHandlers
   });

   doc.save('test.pdf');
}

In your html file

<div id="content" #content>
    <!-- Put your content here -->
</div>

<button (click)="downloadPDF()">Export To PDF</button>

Upvotes: 2

Bansi29
Bansi29

Reputation: 1079

public downloadPdf() {
let doc = new jsPDF('p', 'pt', 'a4');
h2c(document.getElementById('printpdf')).then(function (canvas) {
  let width = doc.internal.pageSize.getWidth();
  let height = doc.internal.pageSize.getHeight();
  let dataURL = canvas.toDataURL('image/jpeg', 1.0);
  doc.addImage(dataURL, 'jpg', 0, 0, width, height, 'none');
  doc.save('mypdf.pdf');
  });
}

Upvotes: 0

user11059168
user11059168

Reputation:

Try .html() instead.

<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 convert() {
        let pdf = new jsPDF('l', 'pt', [tblWidth, tblHeight]);
        pdf.html(document.getElementById('resultTable'), {
            callback: function () {
                // pdf.save('web.pdf');
                window.open(pdf.output('bloburl')); // use this to debug
            }
        });
    }
</script>

Upvotes: 0

Related Questions