blob 文件下载，及请求错误、blob转json错误处理

利用HTML5中a标签的download属性实现下载

1.直接使用a标签进行下载

他可以使a标签的href属性进行下载，如果填写指就会更改你的下载名称(默认后端返回的文件名称)

<a href="/images/a.exe" download="b">点击下载</a>

2.借助blob对象 动态创建a标签进行下载

1. 请求后端获取文件流及文件信息

// 引入下载方法
import {download} from 'utils'
export default{
  methods: {
    async downloadFile () {
      let res = await axios.get(
        url: 'xxxx/xxxx',
        method: 'GET',
        // 设置返回数据类型，这里一定要设置，否则下载下来的会是空白,也可以是`arraybuffer`
        responseType: 'blob',
        params: {
          id: 'xxxxxx'
        }
      )
      // 获取在response headers中返回的下载文件类型
      let type = JSON.parse(res.headers)['content-type']
      
      /*获取在response headers中返回的下载文件名
        因为返回文件名是通过encodeURIComponent()函数进行了编码，因此需要通过decodeURIComponent()函数解码
      */
      let fileName = decodeURIComponent(JSON.parse(res.headers)['file-name'])
      // 调用封装好的下载函数
      download(res, type, fileName)
    }
  }
}

2. 封装下载方法 - 解析文件流，创建a标签并设置下载相关属性

// utils.js
export const download = (res, type, filename) => {
  // 创建blob对象，解析流数据
  const blob = new Blob([res], {
    // 如何后端没返回下载文件类型，则需要手动设置：type: 'application/pdf;chartset=UTF-8' 表示下载文档为pdf，如果是word则设置为msword，excel为excel
    type: type
  })
  const a = document.createElement('a')
  // 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载
  const URL = window.URL || window.webkitURL
  // 根据解析后的blob对象创建URL 对象
  const herf = URL.createObjectURL(blob)
  // 下载链接
  a.href = herf
  // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
  a.download = filename
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  // 在内存中移除URL 对象
  window.URL.revokeObjectURL(herf)
}

3. 点击下载按钮，调用下载方法

 <div id="pdfDom">
    <!-- 要下载的页面 -->
    <div v-html="pageData"></div>
</div>
<el-button type="primary" size="small" @click="downloadFile">点击下载</el-button>

小结

一般都会用第一种 简单容易操作，但实际的使用要根据业务需求来定，第一种适合静态资源的访问 属于get方式的，第二种就没有这种限制 可以用post获取文件流的二进制文件就行

---

后续补充：
1.问题，在请求正确的前提是可以正常下载文件，但当请求出现错误 后端返回json数据时 也会写到文件中 不太有好，进行代码改造 如下图：

代码如下：

.then(res=>{
	console.log(res.type=='application/json');
	if (res.type=='application/json') {
		var reader = new FileReader();
		reader.readAsText(res);
		reader.onloadend = function() {
			var jsonData = JSON.parse(this.result);
			console.log(jsonData);
			if (jsonData.code==500) {
				that.$message.error(jsonData.msg);
			}
		};
	}else{
		const blob = new Blob([res], {type: 'excel'})
		const a = document.createElement('a')
		// 兼容webkix浏览器，处理webkit浏览器中href自动添加blob前缀，默认在浏览器打开而不是下载
		const URL = window.URL || window.webkitURL
		// 根据解析后的blob对象创建URL 对象
		const herf = URL.createObjectURL(blob)
		// 下载链接
		a.href = herf
		a.download = `见证取样记录_${new Date().getTime()}.xlsx`;
		document.body.appendChild(a)
		a.click()
		document.body.removeChild(a)
		window.URL.revokeObjectURL(herf)
	}
	return

})