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 异步调用框架 (Part 1 - 问题 & 场景)
Aug 03 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
JS实现json数组排序操作实例分析
Oct 28 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
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
Django中的静态文件管理过程解析
2019/08/01 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
执行力心得体会
2013/12/31 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
审计专业自荐信范文
2014/04/21 职场文书
推荐信格式范文
2014/05/09 职场文书
公司授权委托书范文
2014/09/21 职场文书
品德与社会教学反思
2016/02/24 职场文书