vue-以文件流-blob-的形式-下载-导出文件操作


Posted in Javascript onAugust 07, 2020

vue项目中,经常遇到文件导出与下载,有时候是直接返回服务端的文件url,这样直接以a链接下载,或者windown.open对不同类型的文件进行下载或预览。但如果返回的是文件流,则需要做一些其他处理,具体形式如下:

1、首先要确定服务器返回的数据类型。

在请求头中加入: config.responseType = 'blob'

有时候,不是所有接口都需要该类型,则可以对接口做一个判定:

// request拦截器
service.interceptors.request.use(
 config => { // 根据接口判定
  if ( config.url === '/setting/exportData' ||
  config.url.indexOf('export') > -1 ||
  config.url.indexOf('Export') > -1) {
   config.responseType = 'blob' // 服务请求类型
  }
  if (getToken()) {
   config.headers['access_token'] = getToken()
  }
  return config
 },
 error => {
  // Do something with request error
  // console.log(error) // for debug
  Promise.reject(error)
 }
)

2、接口请求获取后端返回的文件流

// 导出
  onExport() {
   if (this.dataList === '') {
    this.$message({
     type: 'error',
     message: '暂无数据导出'
    })
    return
   }
   const fd = new FormData()
   fd.append('id', this.id)
   var exportFileName = '导出文件名' //设置导出的文件名,可以拼接一个随机值
   exportData(fd)
    .then(res => {
     // res.data 是后端返回的文件流
     // 调用 downloadUrl 处理文件
     downloadUrl(res.data, exportFileName)
    })
    .catch(err => {
     this.$message({
      type: 'error',
      message: err.message
     })
    })
  },

3、文件处理downloadUrl--该方法可以写为公共方法以便调用

// 使用iframe框架下载文件--以excel为例,可修改type与fileName选择文件类型
export function downloadUrl(res, name) {
 const blob = new Blob([res], { type: 'application/vnd.ms-excel' }) // 构造一个blob对象来处理数据
 const fileName = name + '.xlsx' // 导出文件名
 const elink = document.createElement('a') // 创建a标签
 elink.download = fileName // a标签添加属性
 elink.style.display = 'none'
 elink.href = URL.createObjectURL(blob)
 document.body.appendChild(elink)
 elink.click() // 执行下载
 URL.revokeObjectURL(elink.href) // 释放URL 对象
 document.body.removeChild(elink) // 释放标签
}

4、在ie浏览器中存在兼容性问题,对downloadUrl做一些调整

// 使用iframe框架下载文件 -兼容性考虑
export function downloadUrl(res, name) {
 const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
 // for IE
 if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  const fileName = name + '.xlsx'
  window.navigator.msSaveOrOpenBlob(blob, fileName)
 } else {
  // for Non-IE (chrome, firefox etc.)
  const fileName = name + '.xlsx'
  const elink = document.createElement('a')
  elink.download = fileName
  elink.style.display = 'none'
  elink.href = URL.createObjectURL(blob)
  document.body.appendChild(elink)
  elink.click()
  URL.revokeObjectURL(elink.href)
  document.body.removeChild(elink)
 }
}

总结:至此,以文件流的形式导出文件的一种方式便已经实现。

补充知识:vue中使用文件流进行下载(new Blob),不打开一个新页面下载

我就废话不多说了,大家还是直接看代码吧~

export function download (url, params, filename) {
 
 Message.warning('导出数据中')
 return axios.get(url, {
  params: params,
  responseType:'arraybuffer',
 }).then((r) => {
 
  const content = r.data
  const blob = new Blob([content],{type:'application/vnd.ms-excel'})
  if ('download' in document.createElement('a')) {
   const elink = document.createElement('a')
   elink.download = filename
   elink.style.display = 'none'
   elink.href = URL.createObjectURL(blob)
   document.body.appendChild(elink)
   elink.click()
   URL.revokeObjectURL(elink.href)
   document.body.removeChild(elink)
   Message.success('导出成功')
 
  }
 
 }).catch((r) => {
  console.error(r)
  Message.error('导出失败')
 
 })
}

以上这篇vue-以文件流-blob-的形式-下载-导出文件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
js判断密码强度的方法
Mar 18 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 #Javascript
vue 使用post/get 下载导出文件操作
Aug 07 #Javascript
基于javascript的无缝滚动动画实现2
Aug 07 #Javascript
vue 在methods中调用mounted的实现操作
Aug 07 #Javascript
javascript实现图片轮换动作方法
Aug 07 #Javascript
vue style width a href动态拼接问题的解决
Aug 07 #Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 #Javascript
You might like
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
php实现的农历算法实例
2015/08/11 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
优化Python代码使其加快作用域内的查找
2015/03/30 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
银行会计业务的个人自我评价
2013/11/02 职场文书
安全检查验收制度
2014/01/12 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL