前端实现文件下载功能
前端实现下载功能时,记录使用接口返回文件流得形式进行下载
1,可以通过后端返回的链接a标签直接下载
2,有时候是后端接口返回得文件流进行下载
3,前端生成表格文件下载
第一步我们写一个获取 blob 得方法
/**
* 获取 blob
* @param {String} url 目标文件地址
* @return {Promise}
*/
function getBlob (url) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest()
xhr.open('get', url, true)
xhr.responseType = 'blob'
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response)
}
}
xhr.send()
})
}
第二步
/**
* 保存
* @param {Blob} blob
* @param {String} filename 想要保存的文件名称
*/
function saveAs (blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename)
} else {
const link = document.createElement('a')
const body = document.querySelector('body')
link.href = window.URL.createObjectURL(blob)
link.download = filename
// fix Firefox
link.style.display = 'none'
body.appendChild(link)
link.click()
body.removeChild(link)
window.URL.revokeObjectURL(link.href)
}
}
第三步 实现下载文件
/**
* 下载
* @param {String} url 目标文件地址
* @param {String} filename 想要保存的文件名称
*/
export function download (url, filename) {
getBlob(url).then(blob => {
saveAs(blob, filename)
})
}
这样我们就实现了下载文件功能
完整js代码
/**
* 获取 blob
* @param {String} url 目标文件地址
* @return {Promise}
*/
function getBlob (url) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest()
xhr.open('get', url, true)
xhr.responseType = 'blob'
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.response)
}
}
xhr.send()
})
}
/**
* 保存
* @param {Blob} blob
* @param {String} filename 想要保存的文件名称
*/
function saveAs (blob, filename) {
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(blob, filename)
} else {
const link = document.createElement('a')
const body = document.querySelector('body')
link.href = window.URL.createObjectURL(blob)
link.download = filename
// fix Firefox
link.style.display = 'none'
body.appendChild(link)
link.click()
body.removeChild(link)
window.URL.revokeObjectURL(link.href)
}
}
/**
* 下载
* @param {String} url 目标文件地址
* @param {String} filename 想要保存的文件名称
*/
export function download (url, filename) {
getBlob(url).then(blob => {
saveAs(blob, filename)
})
}
接下来我们就实际页面中去调用下载功能
- 引入js文件到目标组件
- 调用方法传参,实现下载文件
import { download } from '@/components/downLoadFile';
export default {
methods: {
dlf(url,name){
download(url, name);
}
}
}
参考文档
版权声明:本文为weixin_45354225原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。