vue的附件下载与错误提示、blob与json数据转换

---

前言

vue附件下载的处理以及错误提示。

---

一、请求接口

api.js - 请求接口api：

// api.js - 前端请求接口
import request from './xxx/xxx' // request为前端封装好的请求方式 - 不同项目不一样
export const downLoad = params => {
	return request({
		url: 'xxxxx/xxxx/xxxx',
		method: 'get',
		// 设置响应方式为blob，目的将后端返回的数据都转为blob数据
		// 结果：1、正常的附件文件流能正常下载并打开；2、返回错误提示的json数据被转为blob数据
		responseType: 'blob',
	})
}

---

二、封装附件下载方法

1.util.js

// 封装文件下载
export function fileDownload(res) {
  if (res.type == 'application/json') { // application/json - 错误信息
    // 失败接口：Blob {size: 183, type: 'application/json'}
    const data = new FileReader() // 文件API用于读取文件
    data.readAsText(res, 'utf-8') // 将文件以utf-8编码方式读取，结果为string文本
    data.onload = () => {
      // 文件读取完成触发
      let dataResult = data.result // result为读取后的结果
      const parseObj = JSON.parse(dataResult) // 将读取后的string文本转为json数据
      this.$message.error(parseObj.Message) //提示错误信息
    }
  } else { // application/vnd.ms-excel或者其他响应类型 - 文件流
    // 成功接口：Blob {size: 11813, type: 'application/vnd.ms-excel'}
    var blob = new Blob([res.data], {
      type: 'application/vnd.ms-excel;charset=utf-8',
    })
    var contentDisposition = res.headers['content-disposition'] //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
    var filename = decodeURIComponent(contentDisposition.split("filename*=utf-8''")[1])
    var downloadElement = document.createElement('a')
    var href = window.URL.createObjectURL(blob) //创建下载的链接
    downloadElement.style.display = 'none'
    downloadElement.href = href
    downloadElement.download = filename //下载后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() //点击下载
    document.body.removeChild(downloadElement) //下载完成移除元素
    window.URL.revokeObjectURL(href) //释放掉blob对象
  }
}

2.放在全局中
main.js：

const Vue = require('vue')
import { fileDownload } from './common/utils'
Vue.prototype.$fileDownload = fileDownload

---

三、使用

download.vue - 按钮点击事件

// download.vue
// 【下载Excel】按钮 - 页面
<button @click="downLoad">下载Excel</button>

// 引入接口api
import { downLoad } from './api.js'

// 【下载Excel】按钮 - 点击事件
downLoad () {
	const params = {} // 请求参数
	downLoad(params).then(res => this.$fileDownload(res))
}

---

四、说明总结

1、请求api设置响应方式一定要设置为responseType: blob。原因：不设置为blob响应方式，导致后端返回成功接口的文件流blob数据，我们接收为json格式，浏览器能正常下载，但是excel或者wps打不开该文件，因为下载下来的文件格式不对。
2、后端返回两种响应格式的数据，分别为blob格式文件流和json格式错误信息，我们唯一能判断后端返回什么数据类型，即res.type进行判断为’application/json’的json格式数据还是其他格式数据，从而进行一些判断操作。
3、思路：
（1）请求响应blob，返回blob数据但格式不同。
（2）根据res.type做判断：
（3）为json格式数据，将blob转为文本再转为json，拿到错误信息并提示；
（4）为blob数据，直接进行浏览器下载。