dom2canvas

Online Experience

npm package site: https://www.npmjs.com/package/dom2canvas

What dom2canvas2pdf could do?

control the styles what ever you want to show!!
transform dom Elements to canvas, then return the canvas value for you by Promise!
download image result directly with a little code.
download pdf result with jspdf.

How to use?

Use DOM Element & itselves styles:

    <div id="app">
      <style>
        h1 {
          color: red;
          font-family: 'Trebuchet MS', 'Lucida Sans Unicode';
        }
      </style>
      <h1>Hello World</h1>
    </div>
    <script src="./src/main.ts" type="module"></script>

./src/main.ts content:

import dom2canvas from 'dom2canvas2pdf'

const _el = document.querySelector('#app') as HTMLElement

dom2canvs(_el).then((canvas)=>{
    document.body.append(canvas)
})

Dom Strings && styles strings ./src/main.ts content:

import dom2canvas from 'dom2canvas'

const _el = document.querySelector('h1') as HTMLElement
const _styles = `
      <style>
        h1 {
          color: yellow;
          font-size: 3rem;
          font-family: 'Times New Roman', Times, serif;
        }
      </style>
`

dom2canvs(_el,_styles, {
    width: 600,
    height: 800
}).then((canvas)=>{
    document.body.append(canvas)
})

Input string el & style strings

import dom2canvas from 'dom2canvas'

const _el = `
  <h1>Hello World!!!! 777</h1>
`
const _styles = `
      <style>
        h1 {
          color: yellow;
          font-size: 3rem;
          font-family: 'Times New Roman', Times, serif;
        }
      </style>
`

dom2canvs(_el,_styles, {
    width: 600,
    height: 800
}).then((canvas)=>{
    document.body.append(canvas)
})

Transform to Image & download

add this fuction to your code

......
dom2canvs(_el).then((canvas)=>{
    document.body.append(canvas)

    //+++ new +++
    downloadImage(canvas)
})

function downloadImage(canvas) {
    const link = document.createElement("a");
    
    // change the type of the image you want to download!
    link.setAttribute("href", canvas.toDataURL("image/png"));
    link.setAttribute("download", "index.png");
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link)
}

Transform to pdf & download

install jspdf

npm i jspdf

add this fuction to your code

dom2canvs(_el).then((canvas)=>{
    document.body.append(canvas)

    //+++ new +++
    downloadPdf(canvas)
})

function downloadPdf (canvas) {
    const pdf = new jsPDF();
    pdf.addImage(canvas.toDataURL("image/png"), "PNG", 0, 0);
    pdf.save("downloadedPdf.pdf");
}