美文网首页
vue axios 利用blob导出后端返回二进制流excel文

vue axios 利用blob导出后端返回二进制流excel文

作者: 丶灰太狼他叔 | 来源:发表于2019-06-19 16:35 被阅读0次

主要是知识点有blob对象和H5新属性download

  • 原生js创建a标签,添加download属性和文件名称。然后触发该事件进行下载

代码:

  exportRefundList() {
            let params = {
                orderNo: this.qOrderNo.trim(),
                refundNo: this.qRefundNo.trim(),
                storeName: this.qStoreName.trim(),
                groupName: this.qGroupName.trim(),
                buyerName: this.qBuyerName.trim(),
                refundType: this.qRefundType,
                refundState: this.qRefundState,
                sellerState: this.qSellerState,
                productName: this.qProductName.trim(),
                createStartTime: this.qCreateTime ? this.qCreateTime[0] : null,
                createEndTime: this.qCreateTime ? this.qCreateTime[1] : null,
                adminStartTime: this.qAdminTime ? this.qAdminTime[0] : null,
                adminEndTime: this.qAdminTime ? this.qAdminTime[1] : null
            };
            const loading = this.$loading({
                lock: true,
                text: "正在生成文件,请稍等...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)"
            });
            this.$http({
                url: this.$http.adornUrl("/refund_return/export"),
                method: "post",
                timeout: 1000 * 60 * 5,
                data: this.$http.adornData(params, "form", false),
                responseType: "blob"
            })
                .then(({ data }) => {
                    loading.close();
                    const link = document.createElement("a");
                    let blob = new Blob([data], {
                        type: "application/vnd.ms-excel"
                    });
                    link.style.display = "none";
                    link.href = URL.createObjectURL(blob);
                    link.setAttribute(
                        "download",
                        "退单导出" + this.returnTimestamp() + ".xlsx"
                    );
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                })
                .catch(err => {
                    this.$message.error("文件生成失败!");
                });
        }

相关文章

网友评论

      本文标题:vue axios 利用blob导出后端返回二进制流excel文

      本文链接:https://www.haomeiwen.com/subject/peikqctx.html