vue中Button按钮下载后端返回的文件

最新推荐文章于 2024-08-22 18:29:18 发布

Tian丶Yuting

最新推荐文章于 2024-08-22 18:29:18 发布

阅读量732

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45707730/article/details/124490144

版权

这篇博客介绍了如何在HTML中创建一个按钮，通过JavaScript的`click`事件触发Django后端的文件下载。当用户点击按钮时，会调用`exportFile`函数，该函数通过axios发送请求获取文件，然后利用Blob对象和`createObjectURL`方法创建一个下载链接，最后模拟点击完成文件下载。同时，成功下载后会显示一个提示消息。

摘要由CSDN通过智能技术生成

HTML

<el-button
  type="primary"
  plain
  icon="el-icon-upload"
  size="mini"
  @click="exportFile"
  >下载已回复清单
</el-button>

/* a标签下载django后端返回的文件 */
exportFile() {
  DownloadGuanMaiAbnormal().then(res => {
    // 文件下载
    const blob = new Blob([res], {
      type: "application/vnd.ms-excel"
    });
    let link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.setAttribute("download", "文件名称.xlsx");
    link.click();
    link = null;
    this.$message.success("导出成功");
  });
},