一、需求：

1、点击【下载Excel】按钮调后端接口；
2、接口成功：下载该excel文件（后端返回blob文件流）；
3、接口失败，提示错误信息（后端返回json数据）。

二、成功/失败 - 页面展示

1、接口成功：下载excel文件

2、接口失败：提示错误信息

三、成功/失败 - 接口请求/响应展示

1、接口成功：请求

2、接口成功：响应

3、接口失败：请求

4、接口失败：响应

接口失败：响应json

四、代码展示：

1、api.js - 请求接口api

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

2、util.js - 浏览器下载

export const downloadFile = (data, fileName) => {
	var blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
	const elink = document.createElement('a')
	if ('download' in elink) { // 非IE下载
		elink.download = fileName
		elink.style.display = 'none'
		elink.href = URL.createObjectURL(blob)
		document.body.appendChild(elink)
		elink.click()
		URL.revokeObjectURL(elink.href) // 释放URL 对象
		document.body.removeChild(elink)
	} else { // IE10+下载
		navigator.msSaveBlob(blob, fileName)
	}
}

3、download.vue - 按钮点击事件

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

// 引入接口api、引入浏览器下载公共方法
import { getFile } from './api.js'
import { downloadFile } from './utils.js'

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

// 处理后端返回数据 - res后端返回的数据，前端均在一开始处理为文件流Blob数据，故res为blob数据
dealBlob (res) {
	if (res.type == 'application/json') { // application/json - 错误信息
		console('失败接口：', res) // 失败接口：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数据
			console.log('失败接口：', parseObj) // 失败接口：{errorMessage: 'ProgramException: 没有查询到对应数据', hasError: true, message: '没有查询到对应数据', esponseCode: '500', traceId: ''}
			this.msgError(parseObj.message || '操作失败') // 拿到后端错误提示信息并做弹框提示
		}
	} else { // application/vnd.ms-excel或者其他响应类型 - 文件流
		console('成功接口：', res) // 成功接口：Blob {size: 11813, type: 'application/vnd.ms-excel'}
		this.msgSuccess('操作成功')
	    downloadFile(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数据，直接进行浏览器下载。