top of page
Search

Create screenshot from DIV in LWC

There are some ways to take screenshot from div in javascript but in LWC, we need to modify to make it LWC compatible.


First write html as follows



in JS you need to import html2canvas.js. you can download this js from this location.




using printDiv function we can create screenshot and display on the page.

Remember we can display image on Canvas as well, but in my case I was getting blurry images on canvas, so instead on canvas i displayed it on img tag.

4,734 views10 comments

10 則留言

Sridhar NareshIT
Sridhar NareshIT
2023年12月15日

Thanks for Making my job very easier , very helpful blog Keep sharing more blogs on salesforce

按讚
Nevo Harari
Nevo Harari
2023年7月03日

and Can't see inside the js lib


按讚
Nevo Harari
Nevo Harari
2023年7月03日

I also get caught (in promise) Unable to find element in cloned iframe

按讚
Souvik Khan
Souvik Khan
2023年5月04日

My requirement is kinda same, want to take screenshot/convert lwc component to img/svg format. Using html2canvas as above, it showing this error: caught (in promise) Unable to find element in cloned iframe Any idea?

按讚
Tommy
Tommy
2023年9月07日
回覆

Also, doesn't work in Chrome for me either. would love if the Author could explain their solution!

按讚
Tom Tam
Tom Tam
2023年1月11日

Hi do you have screen shots of this HTML2CANVAS in action on the LWC? When I copy your example I get an error: [0 .default] is not a function


Do you have any recommendations on how to overcome this?

按讚
Tommy
Tommy
2023年9月07日
回覆

your static resource reference is the same name as the method, change import HTML2CANVAS from '@salesforce/resourceUrl/HTML2CANVAS';


to


import HTML2CANVASref from '@salesforce/resourceUrl/HTML2CANVAS';
and then
loadScript(this, HTML2CANVASref).then(() => {
		console.log('html2canvas loaded');
	});
按讚
bottom of page