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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 Javascript
微信小程序实现音乐播放页面布局
Dec 11 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 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
Protoss建筑一览
2020/03/14 星际争霸
PHP:风雨欲来 路在何方?
2006/10/09 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
vue--vuex详解
2019/04/15 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
python重要函数eval多种用法解析
2020/01/14 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
Python通过字典映射函数实现switch
2020/11/06 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
办公室文秘自我评价
2013/09/21 职场文书
租房协议书范本
2014/04/09 职场文书
软件项目开发计划书
2014/05/01 职场文书
党员活动日总结
2014/05/05 职场文书
2014年团工作总结
2014/11/27 职场文书
2016公司年会通知范文
2015/04/25 职场文书
2015年市场部工作总结
2015/04/30 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
详解Go语言中Get/Post请求测试
2022/06/01 Golang