技術標籤：JavaScriptVue

前端通過檔案流匯入匯出excel（相容IE）

1. api資料夾內新建config.js，封裝匯入匯出的請求方法

import axios from 'axios'

...

/*
*  上傳
*  url:請求地址
*  params:引數
* */
export function fileUpload(url, params = {},loading=true) {
  return new Promise((resolve, reject) => {
    service({
          url: url,
          method:
 
 'post',
          data: params,
          headers: { 'Content-Type': 'multipart/form-data' }
      }).then(response => {
          resolve(response.data);
      }).catch(error => {
          reject(error);
      });
  });
}

/*
*  json格式請求檔案流匯出excel檔案
*  url:請求地址
*  params:引數
* */
export function
 
 exportFile(url,params,loading=true){
  return new Promise((resolve, reject) => {
    service({
          url: url,
          method: 'post',
          data: params,
          headers: { 'Content-Type':'application/json;charset=UTF-8'},
          responseType: 'arraybuffer'
      }).then(response =>
 
 {
          resolve(response);
      }).catch(error => {
          reject(error);
      });
  });
}

export default {
 ...
  fileUpload,
  exportFile
}

1. 新增介面函式，並在建立index.js引入

// 引入工具類
import http from './config'
...
export const systemManage = {
    ...
    // 使用者匯入匯出excel的介面函式，新增介面地址
	userImport(data) {
		return http.fileUpload('sys/user/imp', data)
	},
	userExport(data) {
		return http.exportFile('sys/user/exp', data)
	},
}

3. 頁面中使用

<template>
  <div>
    <!-- 匯入 -->
    <el-upload
      accept=".xls, .xlsx"
      ref="upload"
      :multiple="false"
      :before-upload="beforeUpload"
      :show-file-list="false"
      action
      :limit="1"
      :http-request="uploadFile"
    >
      <el-button>匯入使用者</el-button>
    </el-upload>
    <!--匯出-->
    <el-button @click="exportExcel()">匯出使用者</el-button>
  </div>
</template>
<script>
import { systemManage } from "@/api/index";
export default {
  data() {
    return {};
  },
  methods: {
    // 上傳檔案
    uploadFile(item) {
      let form = new FormData();
      // 檔案物件
      form.append("excelFile ", item.file);
      // 傳送請求
      systemManage
        .userImport(form)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("匯入成功");
            this.searchFunc();
          } else {
            this.$message.error(res.message);
          }
          this.$refs.upload.clearFiles();
        })
        .catch((err) => {
          this.$refs.upload.clearFiles();
        });
    },
    //excel匯出
    exportExcel(api) {
      let data = {
        // 傳參
      };
      systemManage["userExport"](data)
        .then((res) => {
          console.log(res);
          if (res.status == 200) {
            var filename = decodeURI(res.headers["content-disposition"]).split(
              "="
            )[1];
            let contenttype =
              filename.substring(filename.lastIndexOf("."), filename.length) ===
              "xlsx"
                ? "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
                : "application/vnd.ms-excel;charset=utf-8";

            var blob = new Blob([res.data], {
              type: contenttype,
            });
            if (window.navigator.msSaveOrOpenBlob) {
              // ie
              navigator.msSaveBlob(blob, filename);
            } else {
              var downloadElement = document.createElement("a");
              var href = window.URL.createObjectURL(blob); //建立下載的連結
              downloadElement.href = href;
              downloadElement.download = filename; //下載後文件名
              document.body.appendChild(downloadElement);
              downloadElement.click(); //點選下載
              document.body.removeChild(downloadElement); //下載完成移除元素
              window.URL.revokeObjectURL(href); //釋放掉blob物件
            }
            this.$message.success("匯出成功");
          } else {
            this.$message.error(res.message || "獲取失敗");
          }
        })
        .catch(() => {});
    },
  },
};
</script>

注：在響應頭的Content-Disposition獲取檔名和字尾，需要後端設定Access-Control-Expose-Headers: Content-Disposition