vue:文件下载

1.下载方法是通过创建 Blob 对象,并使用 URL.createObjectURL 来生成下载链接,最终通过创建 <a> 元素并触发点击实现文件下载。

获取到 HTTP 响应后,以下是对每一行代码的解释:

  1. if (res.status === 200) {: 这一行代码检查 HTTP 响应的状态是否为 200,表示请求成功。只有在成功的情况下才会执行后续的文件下载操作。

  2. const blob = new Blob([res.data]);: 使用响应中的数据创建一个 Blob 对象。Blob 是二进制大对象,用于表示二进制数据。

  3. const downloadElement = document.createElement('a');: 创建一个 <a> 元素,用于设置下载链接。

  4. const href = window.URL.createObjectURL(blob);: 使用 URL.createObjectURL 创建一个包含 Blob 对象的 URL。这个 URL 将在后续用于文件下载。

  5. downloadElement.href = href;: 将刚才创建的 URL 设置为 <a> 元素的 href 属性,以便关联下载链接。

  6. downloadElement.download = item.fileName;: 设置下载时的文件名。item.fileName 是文件的名称,会在下载时使用。

  7. document.body.appendChild(downloadElement);: 将 <a> 元素添加到文档的 body 中。这是为了触发下载,因为浏览器需要在文档中存在的元素上进行点击事件。

  8. downloadElement.click();: 模拟点击 <a> 元素,触发文件下载。

  9. document.body.removeChild(downloadElement);: 文件下载完成后,将 <a> 元素从文档中移除。这一步是为了清理文档结构,避免对页面产生影响。

  10. window.URL.revokeObjectURL(href);: 释放之前创建的 Blob 对象的 URL。这是为了释放浏览器资源,防止内存泄漏。

这一系列操作实现了通过浏览器触发文件下载的过程。要注意,这种方式适用于现代浏览器,但在一些旧版本的浏览器中可能存在兼容性问题。

 downloadFile(item) {
      const headers = {
        Authorization: `Bearer ${getToken()}`,
      };

      Axios({
        method: 'GET',
        url: `${webAPI.services.landmis}file/download`,
        params: { id: item.id },
        responseType: 'blob',
        headers,
      }).then((res) => {
        // 请求成功后处理流
        if (res.status === 200) {
          const blob = new Blob([res.data]);
          const downloadElement = document.createElement('a');
          const href = window.URL.createObjectURL(blob); // 创建下载的链接
          downloadElement.href = href;
          downloadElement.download = item.fileName; // 下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); // 点击下载
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        }
      });
    },

值得注意的:

1.需不需要告诉其类型

const blob = new Blob([res], { type: 'application/octet-stream' });

2.下载接口的位置要不要标明类型,否则不知道是什么类型

 resType:'blob'

  • 10
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
引用\[1\]中提到了关于Vue引入CDN的优化方法,可以通过在main.js中更改CDN方式引入,在vue.config.js中配置CDN资源的加载方式来优化Vue项目的CDN引入。引用\[2\]中展示了使用CDN的CSS和JS文件的示例代码。引用\[3\]中提到了通过配置externals来排除CDN信息注入到配置中,以及在chainWebpack中注入CDN的配置。根据这些引用内容,可以得出以下答案。 要下载Vue的CDN文件,可以按照以下步骤进行操作: 1. 在main.js中更改CDN方式引入Vue,可以通过修改引入Vue的代码来实现。具体的修改方式可以参考引用\[1\]中的内容。 2. 在vue.config.js中配置CDN资源的加载方式,可以通过配置externals来排除CDN信息注入到配置中,以及在chainWebpack中注入CDN的配置。具体的配置方法可以参考引用\[3\]中的内容。 3. 在public/index.html文件中添加引入CDN的CSS和JS文件的代码。可以参考引用\[2\]中的示例代码,将CDN的CSS和JS文件的链接添加到index.html文件中。 通过以上步骤,就可以下载Vue的CDN文件并在项目中使用了。请注意,具体的操作步骤可能会因项目的具体情况而有所不同,建议根据项目的实际需求进行相应的配置和修改。 #### 引用[.reference_title] - *1* [vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化](https://blog.csdn.net/qq_40739917/article/details/129332832)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vue首页加载优化,vue使用cdn加载插件,vue cdn优化](https://blog.csdn.net/qq_41463655/article/details/125503250)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值