Excel下载

大柿子炒鸡蛋、

已于 2023-07-10 17:29:49 修改

阅读量330

点赞数

文章标签： excel javascript 前端 vue.js vue

于 2023-07-10 17:28:32 首次发布

本文链接：https://blog.youkuaiyun.com/qq_57491020/article/details/131644159

版权

该代码段展示了在Vue.js中处理数据下载的逻辑。当用户点击下载按钮时，函数获取路由查询参数，构造请求并调用`outStorageDetailDownload`接口获取数据。如果返回的数据不为空，则使用Blob对象和URL.createObjectURL创建一个临时下载链接，最后模拟点击事件触发文件下载。若数据为空，则显示警告信息提示用户无数据可下载。

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

//点击数据下载按钮的回调
    async downloadFun() {
      console.log(this.$route.query);
      let obj = {};
      obj.companyCode = this.$route.query.companyCode;
      obj.skuType = this.$route.query.skuType;
      obj.startDate = this.$route.query.startDate;
      obj.endDate = this.$route.query.endDate;
      let res = await outStorageDetailDownload(obj);
      if (res.size !== 0) {
        this.downloadExcel(res, "出库量明细表");
      } else {
        this.$message({
          message: "暂无数据可下载",
          type: "warning",
        });
      }
    },
    // 封装的下载方法
    downloadExcel(res, filename) {
      const blob = new Blob([res], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", // 对应下载之后文件的mime类型
      });
      const objectUrl = window.URL.createObjectURL(blob); // 生成一个url
      const aLink = document.createElement("a");
      aLink.style.display = "none";
      aLink.href = objectUrl;
      aLink.setAttribute("download", filename);
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink);
    },