在JavaScript中下载PDF Blob时出现问题

时间:2018-10-15 12:54:22

标签: javascript file download base64 blob

我创建了一个包含blobfileName的函数,该函数应该下载实现如下的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本身不是损坏的文件。

2 个答案:

答案 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之前,可以使用相同的方法对八位位组流的内容进行解码。