Vue文件下载，文件导出

-谢某-

已于 2022-11-12 22:07:00 修改

阅读量1.4k

点赞数 1

分类专栏： vue3 文章标签： vue.js javascript ecmascript elementui

于 2022-11-10 10:17:13 首次发布

本文链接：https://blog.youkuaiyun.com/xll20000811/article/details/127782619

版权

vue3 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在Vue项目中实现文件下载功能，使用js-file-download插件，结合Element UI，详细讲解HTML、插件安装、文件引用、API配置及JS代码实现过程，最终实现Excel文件导出。

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

很多人的项目中都有文件下载，文件导出为excel,json等格式的需求，最近我的项目中也有很多这种需求。现在给大家分享一下我是怎么做的：

1.html代码

2.安装 js-file-download插件

下面是项目效果图，右上角的导出，就是我们这次要实现的功能。由于都是真实的数据我在这儿就打码了。

1.html代码

（本次项目用的element plus组件库）为按钮绑定

   <el-button
            type=""
            @click="exportIn"
            style="background: #5d78ff; color: #fff"
            >导出</el-button
          >

2.安装 js-file-download插件

npm install js-file-download

3.文件引用

import fileDownload from "js-file-download";

4.api文件代码

注意：必须加上 responseType: 'blob' 这行代码，不然下载下来的文件会损坏

// 导出
export function exportSelectRoster(data) {
	return request({
		url: '/api/roster/exportSelectRoster',
		method: 'post',
		data,
		responseType: 'blob',
	})
}

5.js代码

（注意：这里的fileDownload(res,"人员名册.xlsx") 这里是因为我这儿的需求是导出为Excel文件所以这样写，如果你需要的是导出为其他文件，那你只需把后缀改成你需要的就行了，例如压缩包就.zip就行了）

// 导出
const exportIn = () => {
//检测是否表格勾选了数据
  if (deleteList.value.length == 0) {
    ElMessage.warning("请选择后导出");
    return;
  }
//提示用户是否导出
  ElMessageBox.confirm("你确定要导出此数据吗", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
//调导出接口 传递后端需要的数据
    exportSelectRoster({
      rosterId: deleteList.value,
    }).then((res) => {
//用fileDownload（后端返给的数据，文件名＋后缀）
      console.log(res);
      fileDownload(res, "人员名册.xlsx");
      ElMessage.success("导出成功");
    });
  });
};