前端文件下载处理

peanut117

已于 2022-06-24 17:49:12 修改

阅读量90

点赞数

文章标签： javascript 前端 react.js

于 2022-06-06 10:38:26 首次发布

本文链接：https://blog.csdn.net/qq_50980821/article/details/125142279

版权

这篇博客介绍了如何使用饿了么UI库的Upload组件完成文件上传后下载的功能。在文件上传完成后，通过监听on-download事件获取fileToken，然后通过这个token向后端请求文件流（blob）。获取到文件流后，利用创建的a标签模拟点击下载，或者对于IE浏览器，使用navigator.msSaveBlob方法进行下载。该方法适用于前端处理文件下载的问题。

摘要由CSDN通过智能技术生成

前端文件下载处理

以饿了吗Upload 上传组件为例

1.在上传完文件之后，点击下载图标
在这里插入图片描述
就会触发:on-download事件，然后拿到文件的fileToken发请求获取后端返回的文件流（我这里是blob）代码案例如下：

最后再调用下载方法即可下载文件。下载方法代码如下

复制代码。

//常用文本
export const download = (file, blobs) => {
  let blob = new File([blobs], { type: "application/octet-stream" });
  if ("download" in document.createElement("a")) {
    const downloadElement = document.createElement("a");
    let href = "";
    if (window.URL) {
      href = window.URL.createObjectURL(blob);
    } else {
      href = window.webkitURL.createObjectURL(blob);
    }
    downloadElement.href = href;
    downloadElement.download = file.fileName || file.name;
    document.body.appendChild(downloadElement);
    downloadElement.click();
    if (window.URL) {
      window.URL.revokeObjectURL(href);
    } else {
      window.webkitURL.revokeObjectURL(href);
    }
    document.body.removeChild(downloadElement);
    URL.revokeObjectURL(href); //释放 Blob
  } else {
    navigator.msSaveBlob(blob, file.fileName || file.name);
  }
  return;
};