vue项目中文件下载（数据流）的实现

在实际项目中，经常会实现文件下载的功能，以下代码基本实现了下载功能的处理，其中包括如果文件不存在获取其他的错误时，接口返回的不是文件数据，而是错误提示的处理。

比如：当下载接口以get或者post请求时，返回的Blob中数据的type一般是文件的类型，如下图：

如果返回的是错误的提示则返回的Blob数据中type是‘application/json’，如下图：

首先定义下载的接口，然后在页面中调用该接口并处理数据。注意返回json数据的特殊处理。

export function downData (params) {return http({url: 'xxx', // 下载文件的接口地址method: 'get',params: params,responseType:'blob'})
}

    // 下载文件的接口downData(option).then(res=>{if (!res) {return}// 无法导出时，报错的问题的处理if (res.type == "application/json") {const reader = new FileReader(); reader.readAsText(res, "utf-8");reader.onload = function () {const msg = JSON.parse(reader.result);this.$notification["error"]({message: "提示",description:msg,duration: 4,});}return }// 以下载xls文件为例let fileName='xxxx'let suffix='xls'let url = window.URL.createObjectURL(new Blob([res]))let link = document.createElement('a')link.style.display = 'none' link.href = urllink.setAttribute('download', fileName+"."+suffix)document.body.appendChild(link)link.click()document.body.removeChild(link) window.URL.revokeObjectURL(url)})

以上代码基本可以实现项目中关于文件下载的要求。

vue项目中文件下载（数据流）的实现相关推荐

vue 打开html流_在vue项目中添加一个html页面，开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
vue项目实现文件下载中心:下载、取消下载、列表展示
vue项目实现文件下载中心:下载.取消下载.列表展示实现下载进度条封装JS方法使用store存储文件下载进度列表创建一个列表组件在页面中使用效果展示实现下载进度条平时业务中下载文件方式 ...
如何在vue项目中系统的使用iconfont字体图标
如何在vue项目中系统的使用iconfont字体图标前言 iconfont的特色官网注册在项目中使用的方式前言今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统 ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
在vue项目中：统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...

vue项目中文件下载（数据流）的实现

vue项目中文件下载（数据流）的实现相关推荐

最新文章

热门文章