Convert DOM element to blob

Asked Apr 10 '21 at 04:58

Active Apr 10 '21 at 04:58

Viewed 1,142 times

I am trying to convert a dom element to Blob, which I want to use later for sending the same as attachment(as pdf). The code for the same is as following:

Dom element:

<div id="dom-container">
   Dom container
</div>

Code for dom to blob conversion: (in order to check the conversion, I am downloading as PDF)

const blobData = new Blob([document.getElementById('dom-container')], {type: "text/html"});
const a = document.createElement("a");
const object_URL = URL.createObjectURL(blobData);
a.href = object_URL;
a.download = 'file.pdf';
a.click();
URL.revokeObjectURL(object_URL);

After opening the file.pdf, getting the below error:

Can someone please help me to figure out where is the issue while this dom to blob/pdf conversion.

Thanks in advance.

asked Apr 10 '21 at 04:58

Rohan Kangale

First off, PDFs are not HTML files. Secondly, you made a blob of a dom element, not its innerHTML. – John Apr 10 '21 at 04:59
@John Thanks for the comment. I tried with innerHTML as well but it didn't worked. Any way to make this work ? – Rohan Kangale Apr 10 '21 at 05:19
Use pdf.js and understand how it works. – John Apr 10 '21 at 05:34
https://stackoverflow.com/questions/25734072/creating-javascript-blob-with-data-from-html-element-then-downloading-it-as-a – MatthewCook0485 Apr 10 '21 at 06:17
@MatthewCook0485 Already tried with the solution but it didn't worked. The issue is related to pdf conversion/rendering – Rohan Kangale Apr 10 '21 at 11:07

Convert DOM element to blob

0 Answers0