H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】vue后台传文件流blob对象,前台点击下载

 this.$axios

 .get("/wx/villageargot/export", {

 params: {

 subDistrictId: this.query.streetId

 },

 responseType: "blob"

 })

 .then(res => {
     const link = document.createElement("a");
     let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
     link.style.display = "none";
     link.href = URL.createObjectURL(blob);
     let num = "";
     for (let i = 0; i < 10; i++) {
        num += Math.ceil(Math.random() * 10);
     }
     link.setAttribute("download", "用户_" + num + ".xls");
     document.body.appendChild(link);
     link.click();
     // 直接删除了a标签 无需通过 window.URL.revokeObjectURL(link.href)释放内存
     document.body.removeChild(link);
     NProgress.done();
 })
 .catch(error => {
 this.$Notice.error({ title: "错误", desc: "网络连接错误" });
 });

前端js/vue下载后台传过来的流文件(如excel)并设置下载文件名

本文地址:H5W3 » 【前端技术】vue后台传文件流blob对象,前台点击下载

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址