- 将请求都封装到 api.js 文件
/**
* 下载文件 用于excel导出
* @param url
* @param parameter
* @returns {*}
*/
export function downFile(url, parameter) {
return axios({
url: url,
params: parameter,
method: 'get',
responseType: 'blob' // 文件流记得设置 blob
})
}
export function downFilepost(url, parameter) {
return axios({
url: url,
data: parameter,
method: 'post',
responseType: 'blob' // 文件流记得设置 blob
})
}
}
/**
* 下载文件
* @param url 文件路径
* @param fileName 文件名
* @param parameter
* @returns {*}
*/
export function downloadFile(url, fileName, parameter) {
return downFile(url, parameter).then(data => {
if (!data || data.size === 0) {
Vue.prototype['$message'].warning('文件下载失败')
return
}
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(new Blob([data]), fileName)
} else {
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放掉blob对象
}
})
}
2.引入api.js文件，项目中页面使用new Blob 下载压缩包
let params = {
key: value, // 根据自己业务需求 的请求字段
key: value, // 根据自己业务需求 的请求字段
key: value, // 根据自己业务需求 的请求字段
...
}
let url = '12332131' // 自己项目的请求路径
downFile(url, params)
.then((data) => {
if (!data) {
this.$message.warning('文件下载失败')
return
}
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(
new Blob([data], {
type: 'application/zip',
}),
params.url
)
} else {
let blob = new Blob([data], {
type: 'application/zip',
})
let url = window.URL.createObjectURL(blob)
const link = document.createElement('a') // 创建a标签
link.href = url
link.download = params.url // 重命名文件
link.click()
URL.revokeObjectURL(url) // 释放内存
}
})
.finally(() => {
})
new Blob 不同文件type类型
| 文件后缀 | type |
|---|---|
| aac | audio/aac |
| .abw | application/x-abiword |
| .arc | application/x-freearc |
| .avi | video/x-msvideo |
| .azw | application/vnd.amazon.ebook |
| .bin | application/octet-stream |
| .bmp | image/bmp |
| .bz | application/x-bzip |
| .bz2 | application/x-bzip2 |
| .csh | application/x-csh |
| .css | text/css |
| .csv | text/csv |
| .doc | application/msword |
| .docx | application/vnd.openxmlformats-officedocument.wordprocessingml.document |
| .eot | application/vnd.ms-fontobject |
| .epub | application/epub+zip |
| .gif | image/gif |
| .htm.html | text/html |
| .ico | image/vnd.microsoft.icon |
| .ics | text/calendar |
| .jar | application/java-archive |
| .jpeg.jpg | image/jpeg |
| .js | text/javascript |
| .json | application/json |
| .jsonld | application/ld+json |
| .mid.midi | audio/midi audio/x-midi |
| .mjs | text/javascript |
| .mp3 | audio/mpeg |
| .mpeg | video/mpeg |
| .mpkg | application/vnd.apple.installer+xml |
| .odp | application/vnd.oasis.opendocument.presentation |
| .ods | application/vnd.oasis.opendocument.spreadsheet |
| .odt | application/vnd.oasis.opendocument.text |
| .oga | audio/ogg |
| .ogv | video/ogg |
| .ogx | application/ogg |
| .otf | font/otf |
| .png | image/png |
| application/pdf | |
| .ppt | application/vnd.ms-powerpoint |
| .pptx | application/vnd.openxmlformats-officedocument.presentationml.presentation |
| .rar | application/x-rar-compressed |
| .rtf | application/rtf |
| .sh | application/x-sh |
| .svg | image/svg+xml |
| .swf | application/x-shockwave-flash |
| .tar | application/x-tar |
| .tif.tiff | image/tiff |
| .ttf | font/ttf |
| .txt | text/plain |
| .vsd | application/vnd.visio |
| .wav | audio/wav |
| .weba | audio/webm |
| .webm | video/webm |
| .webp | image/webp |
| .woff | font/woff |
| .woff2 | font/woff2 |
| .xhtml | application/xhtml+xml |
| .xls | application/vnd.ms-excel |
| .xlsx | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet |
| .xml | application/xml 代码对普通用户来说不可读 (RFC 3023, section 3)text/xml 代码对普通用户来说可读 (RFC 3023, section 3) |
| .xul | application/vnd.mozilla.xul+xml |
| .zip | application/zip |
| .3gp | video/3gpp audio/3gpp（若不含视频） |
| .3g2 | audio/video container video/3gpp2audio/3gpp2（若不含视频） |
| .7z | application/x-7z-compressed |
