dom2canvas

Convert dom/stings to canvas/image/pdf with styles control!!!

it's only 0.64 kB(gzip)!!

Explore the docs ยป

## Result Show: ![dom2canvas](./public/result.png) ### What dom2canvas2pdf could do? 0. control the styles what ever you want to show!! 1. transform dom Elements to canvas, then return the canvas value for you by Promise! 2. download image result directly with a little code. 3. download pdf result with jspdf. ## Get Started use npm: ``` npm i dom2canvas ``` use yarn: ``` yarn add dom2canvas ``` use pnpm: ``` pnpm i dom2canvas ``` ## API Introduce ```ts Dom2canvas(element?: HTMLElement | string, styles?: string, options?: Options): Promise interface Options { width?: string height?: string canvas?: HTMLCanvasElement } ``` ## Use 1. Use DOM Element & itselves styles: ```html

Hello World

``` ./src/main.ts content: ```ts import dom2canvas from 'dom2canvas2pdf' const _el = document.querySelector('#app') as HTMLElement dom2canvs(_el).then((canvas)=>{ document.body.append(canvas) }) ``` 2. Dom Strings && styles strings ./src/main.ts content: ```ts import dom2canvas from 'dom2canvas' const _el = document.querySelector('h1') as HTMLElement const _styles = ` ` dom2canvs(_el,_styles, { width: 600, height: 800 }).then((canvas)=>{ document.body.append(canvas) }) ``` 3. Input string el & style strings ```ts import dom2canvas from 'dom2canvas' const _el = `

Hello World!!!! 777

` const _styles = ` ` dom2canvs(_el,_styles, { width: 600, height: 800 }).then((canvas)=>{ document.body.append(canvas) }) ``` ## Transform to Image & download add this fuction to your code ```ts ...... 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 1. install jspdf ``` npm i jspdf ``` 2. add this fuction to your code ```ts 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"); } ``` ## Last I wish this lib will help you!