downloading a javascript blob variable as mhtml

Question

I'm writing a google chrome extension that uses

chrome.pageCapture.saveAsMHTML(object details, function callback)
function callback (blob mhtmlData) {...};

http://code.google.com/chrome/extensions/dev/pageCapture.html

which basically stores a blob representation of an mhtml page into a variable.

Now I want to let the user download this blob variable as an mhtml file..

I tried this but is gives me a 200kb file filled with random characters.

chrome.pageCapture.saveAsMHTML({tabId: sender.tab.id}, function callback(mhtml){

    var reader = new FileReader();
    reader.readAsDataURL(mhtml);

    reader.onload = function(e) {
        window.open(e.target.result);
    }


});

It looks like Chrome cannot show a mhtml as dataUrl.

anfilat
– anfilat

2012-02-12 07:48:00 +00:00
Commented Feb 12, 2012 at 7:48 — anfilat
– anfilat, Commented Feb 12, 2012 at 7:48

PAEz · Accepted Answer · 2012-02-12 15:09:25Z

4

Following is some code that I put in a page actions popup. I left the stuff that I didnt use but commented it out for reference.
EDIT:
Using the library from https://github.com/eligrey/FileSaver.js it was easy, maybe you could look at that to see what their doing.

popup.html

<html>
<head>
<script xmlns="http://www.w3.org/1999/xhtml" type="application/ecmascript" async="" src="https://raw.github.com/eligrey/FileSaver.js/master/FileSaver.min.js"></script>
<script>
function onLoad(){
var downloadLink = document.querySelector("#MHTML");

var oFReader = new FileReader();
oFReader.onload = function (oFREvent) {
// None of the following worked
  //window.open('data:application/octet-stream;'+oFREvent.target.result.slice(5));
  //window.open('data:application/message/rfc822;'+oFREvent.target.result.slice(5));
  //window.open(oFREvent.target.result);
};

chrome.tabs.getSelected(null, function(tab) {

chrome.pageCapture.saveAsMHTML({tabId: tab.id}, function (mhtml){

/// Works but requires user input
//downloadLink.setAttribute('download',tab.title+'.mhtml');
//downloadLink.setAttribute('href',window.webkitURL.createObjectURL(mhtml));

///Works but awful filename without extension
//window.open(window.webkitURL.createObjectURL(mhtml));

///Doesnt work
//oFReader.readAsDataURL(mhtml);

///Using https://github.com/eligrey/FileSaver.js , works great
saveAs(mhtml, tab.title+'.mhtml');
})
});

}
</script>
</head>
<body onload="onLoad();" style="width: 400px">

<a id="MHTML" href="#">Download Page As MHTML</a>

</body>
</html>

edited Feb 12, 2012 at 15:09

answered Feb 12, 2012 at 11:25

PAEz

8,5422 gold badges37 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

glennv Over a year ago

The window.open(..) part you commented out actually works! It downloads a file named something like acb31f52-d15c-4d80-8a80-24100dfc20b0 with no extension but if you manually give it the .mht extension it can be opened. Thx!

chrome.pageCapture.saveAsMHTML({tabId: sender.tab.id}, function callback(mhtml){ var url = window.webkitURL.createObjectURL(mhtml); window.open(url); });

If there was only a way to give the downloaded file a name using javascript..

Wilt Over a year ago

@glennv You can set a filename if you use an anchor to trigger the download.

Wilt · Accepted Answer · 2020-09-24 06:48:18Z

0

In case you want to give the file a name you could use an anchor element and set the name of the download attribute programmatically:

var reader = new FileReader();
reader.readAsDataURL(mhtml);

reader.onloadend = function(e) {
  const dataUrl = e.target.result;
  const a = document.createElement('a');
  a.href = dataUrl;
  a.download = fileName;
  a.click();
}

answered Sep 24, 2020 at 6:48

Wilt

44.9k15 gold badges163 silver badges216 bronze badges

Collectives™ on Stack Overflow

downloading a javascript blob variable as mhtml

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related