Fatal编程技术网
  • javascript/
  • 将javascript blob变量下载为mhtml

将javascript blob变量下载为mhtml

javascript google-chrome-extension

将javascript blob变量下载为mhtml,javascript,google-chrome-extension,Javascript,Google Chrome Extension,我正在编写一个使用 chrome.pageCapture.saveAsMHTML(object details, function callback) function callback (blob mhtmlData) {...}; 它基本上将mhtml页面的blob表示形式存储到变量中 现在我想让用户下载这个blob变量作为mhtml文件 我试过了，但它给了我一个200kb的文件，里面填充了随机字符 chrome.pageCapture.saveAsMHTML({tabId: sende

我正在编写一个使用

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

它基本上将mhtml页面的blob表示形式存储到变量中

现在我想让用户下载这个blob变量作为mhtml文件

我试过了，但它给了我一个200kb的文件，里面填充了随机字符

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);
    }


});
下面是我放在页面操作弹出窗口中的一些代码。我留下了我没用过的东西，但把它注释掉以供参考。
编辑：
使用图书馆很容易，也许你可以看看他们在做什么

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>


函数onLoad（）{
var downloadLink=document.querySelector（“#MHTML”）；
var of reader=new FileReader（）；
oFReader.onload=函数（OFRENT）{
//以下各项都不起作用
//open（'data:application/octet stream；'+ofretent.target.result.slice（5））；
//open（'data:application/message/rfc822；'+of refort.target.result.slice（5））；
//window.open（of report.target.result）；
};
chrome.tabs.getSelected（空，函数（选项卡）{
saveAsMHTML（{tabId:tab.id}，函数（mhtml）{
///可以工作，但需要用户输入
//setAttribute（'download'，tab.title+'.mhtml'）；
//downloadLink.setAttribute（'href'，window.webkitURL.createObjectURL（mhtml））；
///工作，但没有扩展名
//open（window.webkitURL.createObjectURL（mhtml））；
///不起作用
//readAsDataURL（mhtml）；
///使用https://github.com/eligrey/FileSaver.js ，效果很好
saveAs（mhtml，tab.title+'.mhtml'）；
})
});
}
以下是我在页面操作弹出窗口中输入的一些代码。我留下了我没用过的东西，但把它注释掉以供参考。
编辑：
使用图书馆很容易，也许你可以看看他们在做什么

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>


函数onLoad（）{
var downloadLink=document.querySelector（“#MHTML”）；
var of reader=new FileReader（）；
oFReader.onload=函数（OFRENT）{
//以下各项都不起作用
//open（'data:application/octet stream；'+ofretent.target.result.slice（5））；
//open（'data:application/message/rfc822；'+of refort.target.result.slice（5））；
//window.open（of report.target.result）；
};
chrome.tabs.getSelected（空，函数（选项卡）{
saveAsMHTML（{tabId:tab.id}，函数（mhtml）{
///可以工作，但需要用户输入
//setAttribute（'download'，tab.title+'.mhtml'）；
//downloadLink.setAttribute（'href'，window.webkitURL.createObjectURL（mhtml））；
///工作，但没有扩展名
//open（window.webkitURL.createObjectURL（mhtml））；
///不起作用
//readAsDataURL（mhtml）；
///使用https://github.com/eligrey/FileSaver.js ，效果很好
saveAs（mhtml，tab.title+'.mhtml'）；
})
});
}
如果要为文件命名，可以使用锚元素并以编程方式设置下载属性的名称：

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();
}
如果要为文件命名，可以使用锚元素并以编程方式设置下载属性的名称：

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();
}
看起来Chrome无法将mhtml显示为dataUrl。看起来Chrome无法将mhtml显示为dataUrl。您注释掉的
窗口打开（…）
部分实际上可以工作！它下载一个名为acb31f52-d15c-4d80-8a80-24100dfc20b0的文件，没有扩展名，但如果手动将扩展名设为.mht，则可以打开该文件。谢谢<代码>chrome.pageCapture.saveAsMHTML（{tabId:sender.tab.id}，函数回调（mhtml）{var url=window.webkitURL.createObjectURL（mhtml）；window.open（url）；}）如果只有一种方法可以使用javascript为下载的文件命名。@glennv如果使用锚触发下载，则可以设置文件名。
窗口。打开（…）
您注释掉的部分实际上可以工作！它下载一个名为acb31f52-d15c-4d80-8a80-24100dfc20b0的文件，没有扩展名，但如果手动将扩展名设为.mht，则可以打开该文件。谢谢<代码>chrome.pageCapture.saveAsMHTML（{tabId:sender.tab.id}，函数回调（mhtml）{var url=window.webkitURL.createObjectURL（mhtml）；window.open（url）；}）如果只有一种方法可以使用javascript为下载的文件命名。@glennv如果使用锚触发下载，则可以设置文件名。