您的位置 首页 java

前端开发中vue+axios实现文件下载,附源码

组件内部的js

工具类js

实现效果:

主要js源码:

methods: {

async downloadPre(){

let res = await Service.downloaded(api.img);

console.log(res.data);

let type = res.data && res.data.type || ‘image/jpeg’;

if (!res) {

return

}

let url = window.URL.createObjectURL(new Blob([res.data],{type:type}));

let link = document.createElement(‘a’)

link.style.display = ‘none’

link.href = url

link.setAttribute(‘download’, ‘excel.jpeg’)

document.body.appendChild(link)

link.click()

document.body.removeChild(link) // 下载完成移除元素

window.URL.revokeObjectURL(url) // 释放掉blob对象

},

}

工具类js主要代码:

export function download(url,data = {}){//文件下载

return new Promise((resolve, reject) => {

axios({

method: “get”,

url: url,

data: data,

responseType: “blob”

// responseType: “arraybuffer”,

})

.then(response => {

resolve(response)

}).catch(function(err){

reject(err)

})

})

}

功能实现完成,简单粗暴。

文章来源:智云一二三科技

文章标题:前端开发中vue+axios实现文件下载,附源码

文章地址:https://www.zhihuclub.com/197464.shtml

关于作者: 智云科技

热门文章

发表回复

您的电子邮箱地址不会被公开。

网站地图