通过文件流下载、预览图片，以及导出Excel表格

最新推荐文章于 2023-09-08 12:02:50 发布

黑色的糖果

最新推荐文章于 2023-09-08 12:02:50 发布

阅读量930

点赞数

分类专栏： js vue 文章标签： js javascript css html

本文链接：https://blog.youkuaiyun.com/Dalin0929/article/details/109613608

版权

vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

11 篇文章

订阅专栏

本文介绍如何利用文件流实现图片下载及预览、Excel表格导出等功能。涵盖了GET与POST请求方式，详细展示了使用axios进行文件流处理的具体代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、通过文件流下载图片
1.接口为get方法

使用window.location或a标签的src直接接收接口地址

2.接口为post方法

// url为获取文件流地址，payload为接口参数，fileName为图片名称
axios.post(url, payload, {
 	responseType: 'blob'
})
 .then(res => {
     let b = new Blob([res.data]);
     let url = URL.createObjectURL(b);
     let link = document.createElement('a');
     link.download = fileName;
     link.href = url;
     document.body.appendChild(link);
     link.click();
     window.URL.revokeObjectURL(link.href);
     document.body.removeChild(link);
 }).catch(error => {
    console.log(error);
 })

二、通过文件流预览图片

// url为接口+参数
axios.get(url, {responseType: "arraybuffer",}).then(res => {
   return 'data:image/png;base64,' + btoa(
       new Uint8Array(res.data)
           .reduce((data, byte) => data + String.fromCharCode(byte), '')
   );
})
.then(data => {
	let newPage = window.open("", '_blank');
	let img = new Image();
	img.src =  data;
	img.style.width = "50%";
	img.style.display = "block";
	img.style.margin = "100px auto";
	newPage.document.body.appendChild(img);
}).catch(error => {
    console.log(error);
})

三、导出Excel表格

axios.get({url, {responseType: 'blob'}).then(res => {
    let link = document.createElement('a');
    let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
    link.style.display = 'none';
    link.href = URL.createObjectURL(blob);
    link.setAttribute('download', Date.now() + '.xlsx');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}).catch(error => {
	console.log(error);
})