首页 > 其他分享 >前端文件下载方法封装

前端文件下载方法封装

时间:2023-07-24 17:34:36浏览次数:45  
标签:const 前端 reader filename link error 封装 response 下载

 1 export const downloadFileAxios = (fileUrl) => {
 2     axios({
 3         url: fileUrl,
 4         method: 'GET',
 5         responseType: 'blob',
 6     }).then((response) => {
 7             const contentDisposition = response.headers['content-disposition'];
 8             let filename = '';
 9             if (contentDisposition) {
10                 const filenameMatch = contentDisposition.match(/filename\*?=['"]?(?:UTF-\d['"]*)?([^;\r\n"']*)['"]?;?/);
11                 if (filenameMatch != null) {
12                     filename = decodeURIComponent(filenameMatch[1]);
13                 }
14             }
15             if (!filename) {
16                 return Promise.reject(response)
17             }
18             const url = window.URL.createObjectURL(new Blob([response.data]));
19             const link = document.createElement('a');
20             link.href = url;
21             link.setAttribute('download', filename);
22             document.body.appendChild(link);
23             link.click();
24             window.URL.revokeObjectURL(url);
25             Message.success("文件下载成功")
26         }).catch((error) => {
27             if (error.data) {
28                 // 转换 Blob 为 JSON
29                 let reader = new FileReader();
30                 reader.onload = function() {
31                     let responseJson = JSON.parse(reader?.result as string);
32                     Message.error(responseJson.msg);
33                 };
34                 reader.readAsText(error.data);
35             } else {
36                 Message.error("文件下载失败")
37             }
38         });
39 }

 

标签:const,前端,reader,filename,link,error,封装,response,下载
From: https://www.cnblogs.com/huangxingquan/p/17577836.html

相关文章

  • 9个PHP库简介和下载
    9个非常有用的PHP类库,相信一定可以为你的WEB开发提供更好和更为快速的方法。 1.ReCAPTCHAThereCAPTCHA库让你可以为网站创建高级的CAPTCHA系统,这个系统其实是用来生成验证信息的,甚至包括语音验证。当然还有reCAPTCHA服务可以使用,其提供易用的免费API,值得在你的网站试试。......
  • Stable Diffusion 下载+安装+使用教程【转载】
    转自:https://www.fujieace.com/ai/stable-diffusion-download-install-use.html 注意:本文讲解的用的是用“整合包”来本地部署安装及使用StableDiffusionWebUI,你不需要懂太多的计算机知识,而且用整合包对新手也是比较友好的,磁盘需要预留100G空间才能玩。 前言本文使用......
  • 前端拿到后端返回文件流后页面生成excel表格预览(Luckysheet)
    最近项目遇到一个需求,就是本来只需要导出的excel文件,客户要求在前端页面进行预览查看。在查找资料后,决定使用Luckysheet来进行excel文件的预览。1.安装npmiluckyexcel2.html中引入相关js,css文件,可以自己下下来放到本地引入<linkrel='stylesheet'href='https://cdn.......
  • 前端系列16集-vue3范型,vue-i18n-next,watch,watchEffect
    中台落地手记——业务服务化与数据资产化vue-i18n-nextvue3中使用i18n需要安装的是 [vue-i18nv9] 的版本npminstallvue-i18n@9创建src\lang\index.ts,使用 createI18n 创建i18n实例://src\lang\index.tsimport{createI18n}from'vue-i18n'import{LANG_......
  • JetLinks前端配置
    JetLinks前端配置只需要修改vite.config.ts文件的这两个地方,config.ts文件不用修改: 图1:增加注释;图2:修改为jetlinks后端服务启动所在服务器的IP地址和端口号 备注:https://hanta.yuque.com/px7kg1/yfac2l/fwqriw24lp3cy2lwJetLinks-IOT是一个开源的、企业级的物联网平台,它......
  • 数百种PCB元器件封装整理,看看有没有你想要的!
    常见的PCB元器件有数百种,它们都有不同的封装形式,不同封装的元器件很有可能具有相同的外观,但其内部结构和应用场景却不一样,不管是简单的电子电路还是复杂的电子电路,皆是由这些电子元器件组成。目前优恩半导体具备市场所需全品类过压过流保护元件及分立功率器件产品,如ESD静电保护器件......
  • 封装RedisTemplate工具类
    packagecom.juxi.common.redis.service;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.data.redis.core.*;importorg.springframework.stereotype.Component;importjava.time.Duration;importjava.util.*;importja......
  • vue组件封装 - 选择器远程搜索下拉列表
    <!--*component:人员选择-远程搜索下拉列表*time:2023/7/19*author:zx*使用方式*importPersonSelectfrom"@/components/Dialog/personSelect.vue";*components:{PersonSelect}*<person-selectv-model="test"/>--><......
  • vue组件封装 - 省市县下拉选联动
    改封装组件依赖element-china-area-data插件,引入组件可参照:https://www.npmjs.com/package/element-china-area-data<!--*component:省市县下拉选联动*time:2023/7/19*author:zx*使用方式:*importDialogAddressfrom"@/components/Dialog/dialogAddress.......
  • 怎么看python有没有封装
    Python封装的概念和作用在面向对象编程中,封装是一种将数据和代码包含在一个单独的单元中的机制。通过封装,我们可以隐藏对象的内部实现细节,只暴露必要的接口供其他对象使用。Python是一种面向对象的编程语言,提供了良好的封装机制,使得我们可以更好地组织和管理代码。Python的封装主......