Convert dom/stings to canvas/image/pdf with styles control!!!
it's only 0.64 kB(gzip)!!
Explore the docs »
-
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.
use npm:
npm i dom2canvas
use yarn:
yarn add dom2canvas
use pnpm:
pnpm i dom2canvas
Dom2canvas(element?: HTMLElement | string, styles?: string, options?: Options): Promise<HTMLCanvasElement>
interface Options {
width?: string
height?: string
canvas?: HTMLCanvasElement
}- 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)
})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)
}- 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");
}I wish this lib will help you!