1.后端返回base64格式文件

2.前端代碼

<style lang="less" scoped>
@import "./style/common.less";

.table-div-a {
  color: #409EFF;
  text-decoration: underline;
  cursor: pointer;
}
</style>

<template>
  <div class="template-container content-container" v-loading="pageObj.loading">
    <div class="action-button-div flex-div">
      <div class="action-button-div-left flex-1">
        <el-button class="main-cust-btn" type="primary" size="small" @click="initList()">刷新</el-button>
      </div>
      <div class="action-button-div-right  flex-div">
        <el-select v-model="pageObj.pageParmas.exportType" placeholder="請選擇導(dǎo)出類型" @change="selectVal">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- <div class="single-query-input margin-right-8">
          <el-input size="small" placeholder="請輸入角色名" v-model="pageObj.queryParams.roleName"></el-input>
        </div>
        <el-button-group>
          <el-button class="main-cust-btn" size="small" type="primary" icon="el-icon-search" @click="initList('query')">查詢</el-button>
        </el-button-group> -->
      </div>
    </div>
    <!--表格區(qū)-->
    <div class="table-div flex-div">
      <el-table :data="pageObj.tableData" :stripe="true" ref="listTableRef" border class="flex-1 list-table"
        header-row-class-name="list-table-header">
        <el-table-column type="index" width="40" align="center">
        </el-table-column>
        <el-table-column prop="startTime" label="下載時間" min-width="150" align="center">
        </el-table-column>
        <el-table-column prop="exportTypeName" label="導(dǎo)出類型" min-width="150" align="center">
        </el-table-column>
        <el-table-column prop="operationalName" label="狀態(tài)" min-width="150" align="center">
        </el-table-column>
        <el-table-column prop="endTime" label="完成時間" min-width="120" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="180" fixed="right">
          <div slot-scope="scope">
            <a class="table-div-a" v-if="'計算完成' == scope.row.operationalName" @click="toExportPath(scope.row)">下載</a>
          </div>
        </el-table-column>
      </el-table>
    </div>
    <!--分頁區(qū)-->
    <div class="pagination-div">
      <el-pagination v-show="pageObj.pageParmas.total > 0" :current-page="pageObj.pageParmas.pageNum + 1"
        :page-sizes="pageObj.Config.paginationParams.pageSizes" :page-size="pageObj.pageParmas.pageSize"
        :layout="pageObj.Config.paginationParams.layout" :total="pageObj.pageParmas.total" @size-change="handleSizeChange"
        @current-change="handlePageChange">
      </el-pagination>
    </div>
    <!--確認刪除對話框-->
    <!-- <del-dialog
      :delDialogVisible="deleteObj.delDialogVisible"
      v-on:doDel="delOne"
      v-on:cancelDel="
        () => {
          deleteObj.delDialogVisible = false;
        }
      "
    ></del-dialog> -->
  </div>
</template>

<script>
// 刪除組件
// import delDialog from "../../components/list/DelDialog.vue";
import config from "./config.js";
export default {
  components: {
    // delDialog
  },
  data() {
    return {
      pageObj: {
        // 頁面屬性
        showSearch: true, // 高級搜索展示
        detailRouter: "roleDetail", // 詳情頁路由
        loading: false, // 加載
        tableData: [],
        queryParams: {},
        pageParmas: {
          pageNum: 0,
          pageSize: 10,
          exportType: ''//2 結(jié)算導(dǎo)出 3 訂單導(dǎo)出
        },
        Config: config
      },
      deleteObj: {
        // 刪除對話框 屬性
        delDialogVisible: false, // 是否顯示刪除對話框
        delOneId: "" // 刪除單個ID
      },
      listLooper: null,
      options: [{
        value: 2,
        label: '結(jié)算導(dǎo)出'
      }, {
        value: 3,
        label: '訂單導(dǎo)出'
      }]
    };
  },
  methods: {
    init() {
      if (Object.keys(this.$route.query).length > 0) {//從訂單和結(jié)算頁面帶值過來
        this.pageObj.pageParmas.exportType = this.$route.query.type;
        console.log(this.pageObj.pageParmas.exportType)
      }
      // 初始化面包屑
      this.$store.commit("setBreadCrumbList", [
        { type: 'title', name: '主數(shù)據(jù)' },
        { type: 'title', name: '下載中心' }
      ]);
      this.initList();
    },
    // 跳轉(zhuǎn)新增頁面
    toAdd() {
      var _ = this;
      this.$store.commit("setEditId", "");
      this.$router.push({
        name: _.pageObj.detailRouter
      });
    },
    // 跳轉(zhuǎn)編輯頁
    toEdit(objId) {
      var _ = this;
      this.$store.commit("setEditId", objId);
      this.$router.push({
        name: _.pageObj.detailRouter
      });
    },
    // 展示刪除對話框
    toDelOne(objId) {
      this.deleteObj.delOneId = objId;
      this.deleteObj.delDialogVisible = true;
    },
    // 刪除一個
    delOne() {
      let _ = this;
      const url = this.$A.role + "/" + this.deleteObj.delOneId;
      _.$H.delete(_, url, function () {
        // TODO
        _.deleteObj.delDialogVisible = false;
        _.$U.success(_, "刪除成功！");
        _.initList();
      });
    },
    selectVal() {
      this.pageObj.pageParmas.pageNum = 0;
      this.initList();
    },
    // 初始化列表
    initList() {
      let _ = this;
      clearTimeout(_.listLooper);
      this.pageObj.loading = true;
      // if (this.$U.notEmpty(type)) {
      //   this.pageObj.pageParmas.pageNum = 0;
      // }
      // 初始化查詢參數(shù)
      this.initQueryParams();
      // TODO
      // _.$H.get(_, _.$A.download.list, _.pageObj.queryParams, function (res) {
      //   _.pageObj.tableData = res.data.data.content;
      //   if (
      //     _.pageObj.tableData.length === 0 &&
      //     _.pageObj.pageParmas.pageNum > 0
      //   ) {
      //     _.pageObj.pageParmas.pageNum--;
      //     _.initList();
      //   } else {
      //     _.pageObj.pageParmas.total = res.data.data.totalElements;
      //     _.pageObj.loading = false;

      //     _.listLooper = setTimeout(() => {
      //       _.initList();
      //     }, 30000);
      //   }
      // });
      _.$H.get(_, _.$A.download.list, _.pageObj.queryParams).then(res => {
        _.pageObj.tableData = res.data.data.content;
        if (
          _.pageObj.tableData.length === 0 &&
          _.pageObj.pageParmas.pageNum > 0
        ) {
          _.pageObj.pageParmas.pageNum--;
          _.initList();
        } else {
          _.pageObj.pageParmas.total = res.data.data.totalElements;
          _.pageObj.loading = false;

          // _.listLooper = setTimeout(() => {
          //   _.initList();
          // }, 30000);
        }

      }).catch(err => {

      })
    },
    // 初始化查詢參數(shù)
    initQueryParams() {
      this.pageObj.queryParams.pageNum = this.pageObj.pageParmas.pageNum || 0;
      this.pageObj.queryParams.pageSize = this.pageObj.pageParmas.pageSize || 10;
      this.pageObj.queryParams.exportType = this.pageObj.pageParmas.exportType || '';
    },
    // 條數(shù)變更
    handleSizeChange(val) {
      this.pageObj.pageParmas.pageSize = val;
      this.initList();
    },
    // 頁碼變更
    handlePageChange(val) {
      this.pageObj.pageParmas.pageNum = val - 1;
      this.initList();
    },
    typeFormat(row, key, value) {
      var typeName = "";
      if (value == "01") {
        typeName = "安裝訂單導(dǎo)出";
      } else if (value == "02") {
        typeName = "配送訂單導(dǎo)出";
      } else if (value == "04") {
        typeName = "結(jié)算導(dǎo)出";
      } else if (value == "09") {
        typeName = "補貼訂單導(dǎo)出";
      } else if (value == "012") {
        typeName = "退回訂單記錄導(dǎo)出";
      } else if (value == "03") {
        typeName = "作廢訂單導(dǎo)出";
      } else if (value == "06") {
        typeName = "報修訂單導(dǎo)出";
      } else if (value == "011") {
        typeName = "投訴訂單導(dǎo)出";
      } else if (value == "013") {
        typeName = "不送樁VIN導(dǎo)出";
      }
      return typeName;
    },
    statusFormat(row, key, value) {
      var statusName = "";
      if (value == 0) {
        statusName = "等待中";
      }
      if (value == 1) {
        statusName = "進行中";
      } else if (value == 2) {
        statusName = "已完成";
      } else if (value == 5) {
        statusName = "失敗";
      }
      return statusName;
    },
    downloadFile: function (blob, fileName) {
      const link = document.createElement("a");
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      // 此寫法兼容可火狐瀏覽器
      document.body.appendChild(link);
      const evt = document.createEvent("MouseEvents");
      evt.initEvent("click", false, false);
      link.dispatchEvent(evt);
      document.body.removeChild(link);
    },
    // 將Base64文件轉(zhuǎn)為 Blob
    buildBlobByByte: function (data) {
      const raw = window.atob(data);
      const rawLength = raw.length;
      const uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array]);
    },
    // 二進制數(shù)組 生成文件
    downloadFileByByte: function (data, fileName) {
      const blob = this.buildBlobByByte(data);
      this.downloadFile(blob, fileName);
    },
    // 下載
    toExportPath(obj) {
      let _ = this;
      this.pageObj.loading = true;

      // _.$H.getBlob(
      //   _,
      //   _.$A.exportListDownload + "/" + obj.id,
      //   {},
      //   function (res) {
      // const fileName = _.typeFormat("", "", obj.type);
      // //數(shù)據(jù)轉(zhuǎn)換為文件下載
      // var elink = document.createElement("a");
      // elink.download = fileName;
      // elink.style.display = "none";
      // var blob = new Blob([res.data]);
      // const reader = new FileReader();
      // reader.readAsText(blob); // 以文本形式讀取Blob對象
      // reader.onload = () => {
      //   const jsonStr = reader.result; // 獲取讀取的內(nèi)容
      //   const jsonData = JSON.parse(jsonStr); // 將JSON格式的字符串轉(zhuǎn)換為JavaScript對象

      //   const fileBase64 = jsonData.data.base64;

      //   _.downloadFileByByte(fileBase64, fileName + ".xlsx");
      // };

      // _.pageObj.loading = false;
      //   }
      // );
      _.$H.getBlob(_, _.$A.download.export, {
        id: obj.id,
        exportType: obj.exportType
      }).then(res => {
        console.log(res.data)
        // const fileName = _.typeFormat("", "", obj.type);
        const fileName =  obj.exportTypeName +  Date.now();
        //數(shù)據(jù)轉(zhuǎn)換為文件下載
        var elink = document.createElement("a");
        elink.download = fileName;
        elink.style.display = "none";
        var blob = new Blob([res.data]);
        const reader = new FileReader();
        reader.readAsText(blob); // 以文本形式讀取Blob對象
        reader.onload = () => {
          const jsonStr = reader.result; // 獲取讀取的內(nèi)容
          const jsonData = JSON.parse(jsonStr); // 將JSON格式的字符串轉(zhuǎn)換為JavaScript對象

          const fileBase64 = jsonData.data.base64;

          _.downloadFileByByte(fileBase64, fileName + ".xlsx");
        };

        _.pageObj.loading = false;
      }).catch(err => {

      })
    }
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    clearTimeout(this.listLooper);
  }
};
</script>

3.請求封裝文章來源地址http://www.zghlxwxcb.cn/news/detail-754080.html

// get 請求
http.getBlob = function (vm, url, params) {
    return new Promise((resolve, reject) => {
        axios
            .get(url, {
                params: params || {},
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                    authorization: vm.$store.state.token,
                    responseType: 'blob'
                },
                timeout: config.httpTimeOut,
                responseType: 'blob'
            })
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                custErrFun(vm, err)
            })
    })
}
// postBlob 請求
http.postBlob = function (vm, url, params) {
    return new Promise((resolve, reject) => {
        axios
            .post(url, params, {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                    authorization: vm.$store.state.token,
                    responseType: 'blob'
                },
                timeout: config.httpTimeOut,
                responseType: 'blob'
            })
            .then(res => {
                custResponseFun(vm, res, resolve)
            })
            .catch(err => {
                custErrFun(vm, err)
            })
    })
}

到了這里，關(guān)于后端返回base64文件前端如何下載的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！