我创建了一个包含blob
和fileName
的函数,该函数应该下载实现如下的blob:
const blobToBase64 = (blob, callback) => {
const reader = new FileReader();
reader.onloadend = () => {
const base64 = reader.result;
console.log({ base64 });
callback(base64);
};
reader.readAsDataURL(blob);
};
const downloadFile = (blob, fileName) => () => {
const link = document.createElement('a');
blobToBase64(blob, (base64) => {
link.href = base64;
link.download = fileName;
link.click();
});
};
downloadFile(myBlob, myFileName);
要尝试调试,我做了一个console.log
,以注销由base64
创建的reader.result
的值。
该base64
的值为data:application/octet-stream;base64,Mzc4MDY4...
我的PDF文件已下载,但已损坏。我的文件下载实现中发生了什么错误?
让我知道是否还有其他细节可能对此有所帮助?我100%确信Blob本身不是损坏的文件。
答案 0 :(得分:2)
我无法确定为什么您的代码无法正常工作,但是我可以确定您正在执行的操作充其量是无用的。
请勿在99%*的时间内将Blob转换为dataURI ,您可以使用原始Blob和blobURI直接完成此dataURI的操作。
*剩下的1%是需要创建包含二进制数据的独立文档时发生的,但这种情况并不常见。
在这里,您可以再次直接通过Blob完成您想要做的事情(设置锚点以指向Blob的数据):只需调用{创建一个blobURI(这只是指向内存中数据的指针)即可{3}}。
const downloadFile = (blob, fileName) => {
const link = document.createElement('a');
// create a blobURI pointing to our Blob
link.href = URL.createObjectURL(blob);
link.download = fileName;
// some browser needs the anchor to be in the doc
document.body.append(link);
link.click();
link.remove();
// in case the Blob uses a lot of memory
window.addEventListener('focus', e=>URL.revokeObjectURL(link.href), {once:true});
};
downloadFile(new Blob(['random data']), "myfile.txt");
答案 1 :(得分:1)
我尝试使用Fetch API从服务器下载PDF文件,该服务器给出octet-stream
内容作为响应。因此,如果您检查响应,则会得到类似%PDF-1.4
这是解决方案:
function download(pdfUrl) {
fetch(pdfUrl).then(resp => resp.arrayBuffer()).then(resp => {
// set the blog type to final pdf
const file = new Blob([resp], {type: 'application/pdf'});
// process to auto download it
const fileURL = URL.createObjectURL(file);
const link = document.createElement('a');
link.href = window.URL.createObjectURL(fileURL);
link.download = "FileName" + new Date() + ".pdf";
link.click();
});
}
创建blob之前,可以使用相同的方法对八位位组流的内容进行解码。