<div id=
"sample"
style=
"margin-left:auto;margin-right:auto;width:min-content;"
>
<fieldset><legend>ต.ย.</legend>
เนื้อหา
</fieldset>
</div>
<img src=
"icon_photo.png"
onclick=
"exportdivtopng('sample')"
/>
<img src=
"icon_pdf.png"
onclick=
"exportdivtopdf('sample','1.0')"
/>
<script>
function
exportdivtopng(fld) {
html2canvas(document.querySelector(
'#'
+ fld)).then((canvas) => {
const fname = fld;
let img = canvas.toDataURL(
'image/png'
);
downloadImage(img, `${fname}`);
});
}
function
downloadImage(blob, fileName) {
const tmpLink = window.document.createElement(
'a'
);
tmpLink.style =
'display:none;'
;
tmpLink.download = fileName;
tmpLink.href = blob;
document.body.appendChild(tmpLink);
tmpLink.click();
document.body.removeChild(tmpLink);
tmpLink.remove();
}
function
exportdivtopdf(fld,scale) {
(async() => {
var
data1 = document.getElementById(fld);
await html2canvas(data1).then((canvas) => {
var
pdf =
new
jsPDF(
'portrait'
,
'pt'
,
'a4'
);
const contentDataURL = canvas.toDataURL(
'image/png'
);
pdf.addImage(contentDataURL,
'PNG'
, 10, 10, canvas.width - 20, canvas.height - 20);
pdf.save(fld +
'.pdf'
);
});
})()
}
</script>