知识：vue的附件下载与错误提示、blob与json数据转换_vue-office报错doenload(2)

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

JavaScript

性能

linux

接口失败：响应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、思路：

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

715272582698)]

[外链图片转存中…(img-T31fF9Cl-1715272582699)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】