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 相关文章推荐
写自已的js类库需要的核心代码
Jul 16 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
浅谈node.js中间件有哪些类型
Apr 29 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
2019十大人气国漫
2020/03/13 国漫
php在线代理转向代码
2012/05/05 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
CSS常用网站布局实例
2008/04/03 Javascript
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
javascript new 需不需要继续使用
2009/07/02 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
详谈python中冒号与逗号的区别
2018/04/18 Python
python实现大转盘抽奖效果
2019/01/22 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
flask框架中的cookie和session使用
2021/01/31 Python
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
法学毕业生自我鉴定
2013/11/08 职场文书
中医专业应届生求职信
2013/11/17 职场文书
自我鉴定注意事项
2014/01/19 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
2014年生产部工作总结
2014/12/17 职场文书
Python实现打乒乓小游戏
2021/09/25 Python
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
MySQL 数据 data 基本操作
2022/05/04 MySQL
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL