vue+python实现后台数据excel导出

时间:2021-09-03
本文章向大家介绍vue+python实现后台数据excel导出,主要包括vue+python实现后台数据excel导出使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

废话不多直接上代码

后端代码:

@app.route('/api/user/logindownloadTemplate',methods=['get'])
def downloadTemplate():
    try :
        response = make_response(send_file('./static/file/templates/1.xlsx',as_attachment=True))
        response.headers["Access-Control-Expose-Headers"] = "Content-disposition"
        return response

本人后台使用的flask所以直接flask自带的文件返回文件,这里需要注意设置response的headers,不然会出现编码问题。

这样的文件是文件流,到了前端不能直接下载所以前端需要处理以下

前端代码:

handleDownload() {
      this.$axios
        .get("/api/user/logindownloadTemplate", { responseType: "blob" })
        .then((response) => {
          if (response.status === 200) {
            const filename = response.headers["content-disposition"]
              .split("filename=")[1]
              .split("; filename")[0];
            const url = window.URL.createObjectURL(response.data);
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", "导出" + filename);
            document.body.appendChild(link);
            link.click();
          }
        })
        .catch();
    },

这里是将文件流转为blob格式,然后前端做处理下载下来。当然方法有很多,我这里就用隐藏的a链接下载。注意,请求一定要设置responseType: "blob"。

不同的方法这里的格式也不一样。

原文地址:https://www.cnblogs.com/DarkRoger/p/15222962.html