vue学习记录之——文件流导出下载以及文件流乱码的处理
导出下载功能要看后端接口返回的是文件流还是url还是id,url和id都很好处理,直接使用windouw.location.href,而文件流就比较麻烦。文件流下载具体代码及注释:export function downloadFile(data, fileName, mime) {var blob = new Blob([data], {type: mime || 'application/oc
导出下载功能要看后端接口返回的是文件流还是url还是id,url和id都很好处理,直接使用windouw.location.href,而文件流就比较麻烦。
文件流下载具体代码及注释:
export function downloadFile(data, fileName, mime) {
var blob = new Blob([data], {
type: mime || 'application/octet-stream'
})
/*
blob对象表示一个不可变、原始数据的类文件对象 类似文件对象的二进制数据,因此可以像操作File对象一样操作Blob对象
Blob 构造函数的语法为 var aBlob = new Blob( array, options );
相关的参数说明如下:
array :它是一个由 ArrayBuffer,ArrayBufferView,Blob,DOMString 等对象构成的数组。DOMStrings 会被编码为 UTF-8。
options:一个可选的对象,包含以下两个属性:
type —— 默认值为 "",它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
endings —— 默认值为 "transparent",用于指定包含行结束符 n 的字符串如何被写入。它是以下两个值中的一个:"native",代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者 "transparent",代表会保持 blob 中保存的结束符不变。
MIME类型:媒体类型(通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 )是一种标准,用来表示文档、文件或字节流的性质和格式。
application/octet-stream:表明是某种二进制数据
*/
var blobURL = window.URL.createObjectURL(blob)
// 创建一个新的对象URL,该对象URL可以代表某一个指定的File对象或Blob对象.
var tempLink = document.createElement('a')
// 创建一个a标签
tempLink.style.display = 'none'
// 创建的a标签隐藏
tempLink.href = blobURL
// a标签的href为新建的对象URL
tempLink.setAttribute('download', fileName)
// setAttribute() 方法添加指定的属性,并为其赋指定的值。如果这个指定的属性已存在,则仅设置/更改值。
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank')
}
document.body.appendChild(tempLink)
tempLink.click()
document.body.removeChild(tempLink)
window.URL.revokeObjectURL(blobURL)
}
有的这样处理后下载下来的文件是乱码,像我在项目中遇到的就是下载的文件在wps中打开不是乱码,但是office打开的却是乱码,这种情况就需要处理一下,解决方法:
var blob = new Blob(['\uFEFF' + data], {
type: mime || 'application/octet-stream;charset=utf-8'
})
更多推荐
所有评论(0)