Vue实现下载文件

行动很重要冲冲冲

已于 2023-05-25 16:32:37 修改

阅读量5.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue下载文件前端

于 2022-06-23 20:09:20 首次发布

本文链接：https://blog.csdn.net/weixin_52703987/article/details/125434009

vue 专栏收录该内容

5 篇文章

订阅专栏

vue后台项目实现下载功能

1.首先封装后台接口downFile.js

export function downFile(id: any) {
    return service({
        url: `/compliance/filecheck/getFile/?id=${id}`,
        method: 'get',
        responseType: 'blob',
    })
}

2.页面的话直接绑定

<el-button @click="down(scope.row)" :icon="Download"  type="info" size="small">下载源文件</el-button>

3.直接上逻辑

1.1 页面引入封装好的接口

import { downFile } from '/@/api/downFile';

注意:vue3的引入方式可能会跟vue2有所不同.

//下载
		const down = (scope: any) => {
			console.log(scope)
			console.log(scope.id)
			const filName = scope.fileName;
			downFile(scope.id).then((res) => {
				console.log(res);
				const data = res;
				let url = window.URL.createObjectURL(new Blob([data]));
				let link = document.createElement('a');
				link.style.display = 'none';
				link.href = url;
				link.setAttribute('download', filName);
				document.body.appendChild(link);
				link.click();
			});
		};