前端发送请求获取后端文件，并且前端实现下载文件功能

最近遇到一个需求，就是前端发送post请求获取后端的excel文件，并且前端实现下载导出到本地的功能。

前端页面就长上面那样，一个批量导出功能，用户勾选之后，前端通过接口把id和其他的参数传给后端，接口调用方法这里需要注意的是，这里必须设置responseType: ‘blob’

，后端返回来一个文件流，然后前端通过封装的方法实现下载导出，前端导出方法如下：

这里前端通过blobDownloads实现下载：
前端需要引入这个js

import localDownloadUtil from "@/utils/localDownloadUtil.js";

然后我们看看这个js里封装了两个下载方法，一种是iframe下载，一种是二进制文件下载，这里我们选择了二进制文件下载：

/**
 * 本地下载一个文本文件。
 * @link https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server
 * @param filename {string}
 * @param text {string}
 */
// function download (filename, text) {
//   const element = document.createElement('a')
//   element.setAttribute('href', `data:text/plain;charset=utf-8,${encodeURIComponent(text)}`)
//   element.setAttribute('download', filename)

//   element.style.display = 'none'
//   document.body.appendChild(element)

//   element.click()

//   document.body.removeChild(element)
// }

// iframe下载文件，没又身份验证的get接口可以使用
function iframeDownloads(lastUrl){
  var downloadFileUrl = window.g.API_URL + lastUrl
  var elemIF = document.createElement("iframe");
  elemIF.src = downloadFileUrl;
  elemIF.style.display = "none";
  document.body.appendChild(elemIF);
}
// 设备二进制文件
function blobDownloads (data, fileName) {
  if (!data) {
    return
  }
  // type: 'application/vnd.ms-excel'
  const url = window.URL.createObjectURL(new Blob([data]))
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  link.setAttribute('download', fileName)
  document.body.appendChild(link)
  link.click()
  window.URL.revokeObjectURL(url)
  document.body.removeChild(link)// 下载完毕删除a标签
}

export default {
  // download,
  blobDownloads,
  iframeDownloads
}

还有一种情况是后端返回的不是文件流或文件对象，而返回的就是一个blob文件，然后文件名带文件格式的字符串，如下图是后端返回的结果：

那这个请求就不能用我们封装的请求去发请求了，需要我们手动写个axios去发请求，并将返回的结果通过window.open来打开下载：

整个页面完整代码如下：文章来源地址https://www.toymoban.com/news/detail-703633.html

<template>
  <div class="mainBox">
    <!-- 仿冒日志 -->
    <el-card shadow="always" :style="'height:100%;overflow:auto;'">
      <div class="centerLeftBox">
        <search-form
          ref="searchForm_Board"
          @reset="reset_Board"
          @handleSubmit="handleSubmitSearch_Board"
          :formData="formData_Board"
          :isInline="true"
          :searchConfig="searchConfig_Board"
        >
        </search-form>
      </div>
    </el-card>
    <div style="height:10px;"></div>
    <el-card>
      <commonTable
        :tableHead="tableHead_Board"
        :tableData="tableData_Board"
        :selectionFlag="true"
        :toolBoxFlag="true"
        :resizable="true"
        :dataFiter="true"
        :xuhaoFlag="false"
        :dropdownList="dropdownList"
        @selectAction="selectAction"
        :addBtn="false"
        :tableLoading="tableLoading_Board"
        :showListD="showListD_Board"
        :maxHeight="'458'"
        :freeElfFlag="false"
        :rightBtnList="rightBtnList"
        ref="commonTable"
      >
        <template slot-scope="scope" slot="freeElf">
          <!-- <el-button
          size="mini"
          type="text"
          @click="goFakeLog(scope.scope.row)"
          v-authbuttons:[otherAuth]
          >仿冒日志</el-button
        > -->
        </template>
      </commonTable>
      <div style="height:10px;"></div>
      <el-pagination
        class="tac page-style"
        background
        @size-change="BoardChangeSize"
        @current-change="BoardCurrentChange"
        :current-page.sync="BoardPageObj.page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size.sync="BoardPageObj.page_size"
        :current.sync="BoardPageObj.page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="BoardPageObj.total"
        :style="'text-align:left;'"
      ></el-pagination>
    </el-card>

    <el-dialog
      title="处理仿冒"
      center
      :visible.sync="isShowModal"
      @close="closeModal"
      :show-close="true"
      :close-on-click-modal="false"
      :width="'800px'"
    >
      <fake-edit
        v-if="isShowModal"
        ref="fakeEdit"
        :formData="FakeObj"
        :newValue="newValue"
        @closeFake="closeFake"
      />

      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowModal = false">取 消</el-button>
        <el-button type="primary" :loading="saveLoading" @click="editOk"
          >处 理</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import searchForm from "@/components/search-form";
import commonTable from "@/components/common-table";

import { getFakelogList } from "@/api/systemControl.js";

import { getBoardFakeCommonData } from "@/api/asset.js";
import localDownloadUtil from "@/utils/localDownloadUtil.js";

import { getToken } from "@/utils/auth";
import axios from "axios";
export default {
  name: "PendingProcessing",
  components: {
    commonTable,
    searchForm
  },

  data() {
    return {
      formData_Board: {},
      searchConfig_Board: [
        {
          type: "select",

          label: "操作类型",
          props: "log_pd_result",
          labelWidth: 95,
          options: [],
          changeSearch: true,
          changeSearch: true,
          defaultPropsLabel: "val",
          defaultPropsValue: "key"
        },

        { type: "input", label: "设备IP", props: "ip", labelWidth: 95 },
        { type: "input", label: "设备MAC", props: "old", labelWidth: 95 },
        {
          type: "input",
          label: "当前MAC",
          props: "new",
          labelWidth: 95
        },
        {
          type: "timeBox",
          label: "时间范围",
          props: "time"
        },

        { type: "btnList" }
      ],
      tableHead_Board: [
        {
          label: "设备IP",
          prop: "ip",
          type: "normal",
          sortable: false
        },
        { label: "设备MAC", prop: "old", type: "normal", sortable: false },

        {
          label: "仿冒原因",
          prop: "cause_str",
          type: "normal",
          sortable: false
        },
        {
          label: "当前MAC",
          prop: "new",
          type: "normal",
          sortable: false
        },

        {
          label: "操作人账户",
          prop: "user_name",
          type: "normal",
          sortable: false
        },

        {
          label: "操作类型",
          prop: "pd_result_str",
          type: "normal",
          sortable: false
        },
        {
          label: "更新时间",
          prop: "c_time",
          type: "normal",
          sortable: false
        }
      ],
      tableData_Board: [],
      tableLoading_Board: false,
      showListD_Board: [
        "ip",
        "old",
        "cause_str",
        "new",
        "user_name",
        "c_time",
        "pd_result_str"
      ],
      BoardPageObj: {
        page: 1,
        page_size: 10,
        total: 0
      },
      editAuth: "update,FakeManage",
      otherAuth: "others,FakeManage",
      FakeObj: {},
      isShowModal: false,
      saveLoading: false,
      newValue: "",
      dropdownList: [
        // {actionName:'fileAction',label:'归档',iconClass:'el-icon-s-cooperation',actionConfirm:'是否确定归档这些数据'},
        // {actionName:'deleteAction',label:'删除',iconClass:'el-icon-delete',actionConfirm:'是否确定删除这些数据'},
        {
          actionName: "downLoadBatch",
          label: "批量导出",
          type: "primary",
          iconClass: "el-icon-download",
          actionConfirm: "是否确定导出这些数据"
        }
        // {
        //   actionName: "editGroup",
        //   label: "移动分组",
        //   type: "primary",
        //   iconClass: "el-icon-s-cooperation",
        //   actionConfirm: "是否确定移动这些数据",
        //   flag: true,
        // },
        // {actionName:'editGroupHigh',label:'高级分组',type:'primary',iconClass:'el-icon-s-grid',actionConfirm:'', flagEx: true,},
      ],
      rightBtnList: [
        {
          actionName: "downAll",
          label: "一键导出",
          type: "primary",
          iconClass: "el-icon-download",
          actionConfirm: "",
          flagEx: true
        }
      ]
    };
  },
  created() {
    this.formData_Board.ip = this.$route.query.fakeIp;
    this.handleSubmit_Board({}, true);
    this.getCommonData();
  },

  methods: {
    // 每页显示数变动
    BoardChangeSize(pageSize) {
      // console.log("条数", pageSize);
      this.BoardPageObj.page_size = pageSize;
      this.handleSubmit_Board({}, true);
    },

    BoardCurrentChange(page) {
      // console.log("当前页", page);
      this.BoardPageObj.page = page;
      this.handleSubmit_Board({}, false);
    },

    // 获取交换机列表数据
    handleSubmit_Board(data, flag) {
      if (flag) {
        this.BoardPageObj.page = 1;
      }
      let dataT = JSON.parse(JSON.stringify(this.formData_Board));
      dataT.page = this.BoardPageObj.page;
      dataT.page_size = this.BoardPageObj.page_size;

      if (dataT.time && dataT.time.length > 0) {
        dataT.start_time = dataT.time[0];
        dataT.end_time = dataT.time[1];
        delete dataT.time;
      }

      this.tableLoading_Board = true;
      getFakelogList(dataT)
        .then(res => {
          this.tableData_Board = res.data.list;
          this.BoardPageObj.total = res.data.total;
          this.tableLoading_Board = false;
        })
        .catch(err => {});
    },

    // 重置筛选项
    reset_Board() {
      this.formData_Board = {};

      this.handleSubmit_Board({}, true);
    },

    handleSubmitSearch_Board(data) {
      this.handleSubmit_Board(data, true);
    },

    editData(item) {
      this.isShowModal = true;
      this.newValue = item.new;

      this.FakeObj = {
        ...item,
        process_type: "1"
      };
    },

    closeModal() {
      this.isShowModal = false;
    },
    closeFake() {
      this.isShowModal = false;
      this.reset_Board();
    },

    editOk() {
      this.$nextTick(() => {
        this.$refs.fakeEdit.submit();
      });
    },

    // 数据批量操作,判断和提示都已经做好了
    selectAction(data) {
      var idList = [];
      var idString = "";
      for (let index = 0; index < data.data.length; index++) {
        const element = data.data[index];
        idList.push(element.id);
        idString = idString + element.id;
        if (index + 1 !== data.data.length) {
          idString = idString + ",";
        }
      }
      var dataT = { ids: idString };
      var that = this;
      if (data.name === "fileAction") {
        // 归档
        // assetsdevinfofiling(dataT).then((res) => {
        //   that.$message({ message: "归档成功", type: "success" });
        //   this.handleSubmitSearch({});
        // });
      } else if (data.name === "deleteAction") {
        // if (data.data.length <= 1) {
        //   assetsListDelete(dataT.ids).then((res) => {
        //     that.$message({ message: "删除成功", type: "success" });
        //     this.handleSubmitSearch({});
        //   });
        // } else {
        //   multipleDelete(dataT.ids).then((res) => {
        //     that.$message({ message: "删除成功", type: "success" });
        //     this.handleSubmitSearch({});
        //   });
        // }
      } else if (data.name === "editGroup") {
        // var showListFenzu = [];
        // for (let index = 0; index < data.data.length; index++) {
        //   const element = data.data[index];
        //   showListFenzu.push(element.id);
        // }
        // this.editAssetGroutIdList = showListFenzu;
        // this.treeTitle = "设置资产分组";
        // this.treeFlag = true;
      } else if (data.name === "downLoadBatch") {
        // dataT.id_ls = JSON.stringify(idList);
        dataT.filename = "仿冒文件";
        dataT.pending_flag = "1";
        dataT.ip = that.formData_Board.ip ? that.formData_Board.ip : "";
        dataT.old = that.formData_Board.old ? that.formData_Board.old : "";
        dataT.new = that.formData_Board.new ? that.formData_Board.new : "";
        dataT.pd_result = "";
        this.tableLoading_Board = true;

        let datatFormdata = new FormData();
        for (var key in dataT) {
          datatFormdata.append(`${key}`, dataT[key]);
        }

        axios({
          url: `${window.g.API_URL}/counterfeits/log/export/`,
          method: "post",

          data: datatFormdata,
          headers: {
            "Content-Type": "multipart/form-data",
            Authorization: "Bearer " + getToken()
          }
        })
          .then(res => {
            // console.log("导出", res);
            if (res.data.code == 200) {
              let filename = res.data.data;
              window.open(`${window.g.API_URL}/media/${filename}`);
              this.$message.success("批量导出成功", 4000);
              this.$nextTick(() => {
                this.$refs.commonTable.resetSelect();
                this.$refs.commonTable.clearSelection();
              });
              this.tableLoading_Board = false;
            }
          })
          .catch(err => {});
      } else if (data.name === "downAll") {
        this.tableLoading_Board = true;
        let query = {
          filename: "仿冒文件",
          ids: "all"
        };

        let queryFormdata = new FormData();
        for (var k in query) {
          queryFormdata.append(`${k}`, query[k]);
        }

        axios({
          url: `${window.g.API_URL}/counterfeits/log/export/`,
          method: "post",

          data: queryFormdata,
          headers: {
            "Content-Type": "multipart/form-data",
            Authorization: "Bearer " + getToken()
          }
        })
          .then(res => {
            // console.log("导出", res);
            if (res.data.code == 200) {
              let filename = res.data.data;

              window.open(`${window.g.API_URL}/media/${filename}`);
              this.$message.success("一键导出成功", 4000);

              this.$nextTick(() => {
                this.$refs.commonTable.resetSelect();
                this.$refs.commonTable.clearSelection();
              });
              this.tableLoading_Board = false;
            }
          })
          .catch(err => {});
      }
    },

    goFakeLog(item) {
      this.$router.push({
        path: "FakeLog",
        query: {
          fakeIp: item.ip
        }
      });
    },

    //获取公共数据
    getCommonData() {
      getBoardFakeCommonData()
        .then(res => {
          // console.log("获取公共数据", res);
          this.$nextTick(() => {
            this.searchConfig_Board[0].options = res.data.log_pd_result;
          });
        })
        .catch(err => {});
    }
  }
};
</script>

到了这里，关于前端发送请求获取后端文件，并且前端实现下载文件功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！