Vue table表格导出Excel方法

一.添加导出按扭

<el-button class="search" @click="handleExport">导出</el-button>

二.接口

export function vendorExport(query) {
    return request_biz({
        url: "/vendor/export",
        method: "get",
        responseType:'blob',
        params: query
    })
}

三.后端提供的数据流的形式

 四.方法

//     导 出 文 件
    handleExport() {
      this.$message.closeAll()
      this.$message.info("导出中，请稍后~")
      vendorExport().then((res) => {
        // 转化为blob对象
        let blob = new Blob([res], {
          type: "application/octet-stream"
        })
        let filename = "供应商管理" + ".xlsx"
        // 将blob对象转为一个URL
        var blobURL = window.URL.createObjectURL(blob)
        // 创建一个a标签
        var tempLink = document.createElement("a")
        // 隐藏a标签
        tempLink.style.display = "none"
        // 设置a标签的href属性为blob对象转化的URL
        tempLink.href = blobURL
        // 给a标签添加下载属性
        tempLink.setAttribute("download", filename)
        if (typeof tempLink.download === "undefined") {
          tempLink.setAttribute("target", "_blank")
        }
        // 将a标签添加到body当中
        document.body.appendChild(tempLink)
        // 启动下载
        tempLink.click()
        // 下载完毕删除a标签
        document.body.removeChild(tempLink)
        window.URL.revokeObjectURL(blobURL)
        this.$message({
          message: "导出成功~",
          type: "success"
        })
      })
    },