码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-10 18:58:57      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:项目   for   拼接   rop   file   导出   intercept   数据类型   child   

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-以文件流的形式-下载-导出文件

标签:项目   for   拼接   rop   file   导出   intercept   数据类型   child   

原文地址:https://www.cnblogs.com/liangpi/p/13087340.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!