Generate pdf from html Angular7

Question

i'm facing a problem generating a pdf from my page. I'm using jspdf and html2canvas but the pdf generated is a white page. Help me please

HTML:

<mat-card>
    <table id="contentToConvert">
      <tr>
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
      </tr>
      <tr>
        <td>Row 1</td>
        <td>Row 1</td>
        <td>Row 1</td>
      </tr>
      <tr>
        <td>Row 2</td>
        <td>Row 2</td>
        <td>Row 2</td>
      </tr>
      <tr>

    </table>

  </mat-card>

Component.ts:

import * as jspdf from 'jspdf';
import html2canvas from 'html2canvas';
.
.
.
 public captureScreen() {
var data = document.getElementById('contentToConvert');
html2canvas(data).then(canvas => {

  var imgWidth = 208;
  var pageHeight = 295;
  var imgHeight = canvas.height * imgWidth / canvas.width;
  var heightLeft = imgHeight;

  const contentDataURL = canvas.toDataURL('image/png')
  let pdf = new jspdf('p', 'mm', 'a2'); // A4 size page of PDF  
  var position = 0;
  pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
  pdf.save('MYPdf.pdf'); // Generated PDF   
});}

this is what I see in the browser console, in the result of getElementById

accessKey: ""
align: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: _ngcontent-eks-c6, 1: id, _ngcontent-eks-c6: _ngcontent-eks-c6, id: id, length: 2}
autocapitalize: ""
baseURI: "http://localhost:4200/sigma2.0/"
bgColor: ""
border: ""
caption: null
cellPadding: ""
cellSpacing: ""
childElementCount: 1
childNodes: NodeList [tbody]
children: HTMLCollection [tbody]
classList: DOMTokenList [value: ""]
className: ""
clientHeight: 140
clientLeft: 0
clientTop: 0
clientWidth: 180
contentEditable: "inherit"
dataset: DOMStringMap {}
dir: ""
draggable: false
elementTiming: ""
enterKeyHint: ""
firstChild: tbody
firstElementChild: tbody
frame: ""
hidden: false
id: "contentToConvert"
innerHTML: "<tbody _ngcontent-eks-c6=""><tr _ngcontent-eks-c6=""><th _ngcontent-eks-c6="">Column1</th><th _ngcontent-eks-c6="">Column2</th><th _ngcontent-eks-c6="">Column3</th></tr><tr _ngcontent-eks-c6=""><td _ngcontent-eks-c6="">Row 1</td><td _ngcontent-eks-c6="">Row 1</td><td _ngcontent-eks-c6="">Row 1</td></tr><tr _ngcontent-eks-c6=""><td _ngcontent-eks-c6="">Row 2</td><td _ngcontent-eks-c6="">Row 2</td><td _ngcontent-eks-c6="">Row 2</td></tr><tr _ngcontent-eks-c6=""><td _ngcontent-eks-c6="">Row 3</td><td _ngcontent-eks-c6="">Row 3</td><td _ngcontent-eks-c6="">Row 3</td></tr><tr _ngcontent-eks-c6=""><td _ngcontent-eks-c6="">Row 4</td><td _ngcontent-eks-c6="">Row 4</td><td _ngcontent-eks-c6="">Row 4</td></tr><tr _ngcontent-eks-c6=""><td _ngcontent-eks-c6="">Row 5</td><td _ngcontent-eks-c6="">Row 5</td><td _ngcontent-eks-c6="">Row 5</td></tr><tr _ngcontent-eks-c6=""><td _ngcontent-eks-c6="">Row 6</td><td _ngcontent-eks-c6="">Row 6</td><td _ngcontent-eks-c6="">Row 6</td></tr></tbody>"
innerText: "Column1 Column2 Column3↵Row 1   Row 1   Row 1↵Row 2 Row 2   Row 2↵Row 3 Row 3   Row 3↵Row 4 Row 4   Row 4↵Row 5 Row 5   Row 5↵Row 6 Row 6   Row 6"
inputMode: ""
isConnected: true
isContentEditable: false
lang: ""
lastChild: tbody
lastElementChild: tbody
localName: "table"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: null
nodeName: "TABLE"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 140
offsetLeft: 16
offsetParent: mat-card.mat-card
offsetTop: 16
offsetWidth: 180
outerHTML: "<table _ngcontent-eks-c6="" id="contentToConvert"><tbody _ngcontent-eks-c6=""><tr _ngcontent-eks-c6=""><th _ngcontent-eks-c6="">Column1</th><th _ngcontent-eks-c6="">Column2</th><th _ngcontent-eks-c6="">Column3</th></tr><tr _ngcontent-eks-c6=""><td _ngcontent-eks-c6="">Row 1</td><td _ngcontent-eks-c6="">Row 1</td><td _ngcontent-eks-c6="">Row 1</td></tr><tr _ngcontent-eks-c6=""><td _ngcontent-eks-c6="">Row 2</td><td _ngcontent-eks-c6="">Row 2</td><td _ngcontent-eks-c6="">Row 2</td></tr><tr _ngcontent-eks-c6=""><td _ngcontent-eks-c6="">Row 3</td><td _ngcontent-eks-c6="">Row 3</td><td _ngcontent-eks-c6="">Row 3</td></tr><tr _ngcontent-eks-c6=""><td _ngcontent-eks-c6="">Row 4</td><td _ngcontent-eks-c6="">Row 4</td><td _ngcontent-eks-c6="">Row 4</td></tr><tr _ngcontent-eks-c6=""><td _ngcontent-eks-c6="">Row 5</td><td _ngcontent-eks-c6="">Row 5</td><td _ngcontent-eks-c6="">Row 5</td></tr><tr _ngcontent-eks-c6=""><td _ngcontent-eks-c6="">Row 6</td><td _ngcontent-eks-c6="">Row 6</td><td _ngcontent-eks-c6="">Row 6</td></tr></tbody></table>"
outerText: "Column1 Column2 Column3↵Row 1   Row 1   Row 1↵Row 2 Row 2   Row 2↵Row 3 Row 3   Row 3↵Row 4 Row 4   Row 4↵Row 5 Row 5   Row 5↵Row 6 Row 6   Row 6"
ownerDocument: document
parentElement: mat-card.mat-card
parentNode: mat-card.mat-card
part: DOMTokenList [value: ""]
prefix: null
previousElementSibling: null
previousSibling: null
rows: HTMLCollection(7) [tr, tr, tr, tr, tr, tr, tr]
rules: ""
scrollHeight: 140
scrollLeft: 0
scrollTop: 0
scrollWidth: 180
shadowRoot: null
slot: ""
spellcheck: true
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
summary: ""
tBodies: HTMLCollection [tbody]
tFoot: null
tHead: null
tabIndex: -1
tagName: "TABLE"
textContent: "Column1Column2Column3Row 1Row 1Row 1Row 2Row 2Row 2Row 3Row 3Row 3Row 4Row 4Row 4Row 5Row 5Row 5Row 6Row 6Row 6"
title: ""
translate: true
width: ""
__proto__: HTMLTableElement

Seems that operation getElementById is ok, i don't understand.

thanks in advance. Filippo

Are you sure `document.getElementById('contentToConvert');` return an element? — Prashant Pimpale, Dec 04 '19 at 11:34
i'm not sure but this should be the stackblitz demo... https://stackblitz.com/edit/angular-brntuv — Filippo, Dec 04 '19 at 12:18
Check this:https://stackoverflow.com/questions/23035858/export-html-table-to-pdf-using-jspdf — Prashant Pimpale, Dec 04 '19 at 12:43
in the example is possible to obtain a pdf with the strings contained in the page, i want to camptur via canvas a screen and then convert it into a pdf — Filippo, Dec 04 '19 at 14:08

Generate pdf from html Angular7

0 Answers0