vue导出excel

1.vue-json-excel导出excel无法导入怎么办

vue-json-excel导出的excel是html转化过来的，当然无法导入。怎么办？换插件呀。
1.安装依赖

npm install --save xlsx file-saver

插件github地址：https://github.com/SheetJS/js-xlsx，https://github.com/eligrey/FileSaver.js
2.多次用到，先封装成组件

<template>
  <transition name="fadeIn">
    <div v-show="false">
      <el-table
        :id="exportExcelInfo.excelId"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
      >
        <div v-for="(item, index) in exportExcelArry" :key="index">
          <template>
            <el-table-column
              v-if="!item.formatterFlag"
              :prop="item.prop"
              :label="item.label"
            >
            </el-table-column>
            <el-table-column v-else :prop="item.prop" :label="item.label">
              <template slot-scope="scope">
                <span>{{
                  formatter(scope.row[item.prop], item, scope.row, item.prop)
                }}</span>
              </template>
            </el-table-column>
          </template>
        </div>
      </el-table>
    </div>
  </transition>
</template>
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  props: {
    exportExcelInfo: {
      type: Object,
      default: {},
    },
    exportExcelArry: {
      type: Array,
      default: [],
    },
    tableData: {
      type: Array,
      default: [],
    },
  },
  methods: {
    //excel导出
    exportExcel() {
      var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(
        document.querySelector("#" + this.exportExcelInfo.excelId),
        xlsxParam
      );
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          this.exportExcelInfo.excelName
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    //表格formatter数据格式化
    formatter(value, item, row, prop) {
      //针对table中item多层对象层级的情况
      if (prop.indexOf(".") > 0) {
        let temp = prop.split(".");
        //item中嵌套两层
        if (temp.length == 2) {
          let temp = prop.split(".");
          if (item.formatterType == "common-type") {
            //通用类型转换
            let arry = item.formatterInfo;
            for (let i in arry) {
              if (arry[i].value == row[temp[0]][temp[1]]) {
                return arry[i].label;
              }
            }
          } else if (item.formatterType == "time-type") {
            //时间标准格式化
            if (!global.isNull(row[temp[0]][temp[1]])) {
              return row[temp[0]][temp[1]].substring(
                0,
                row[temp[0]][temp[1]].length - 2
              );
            }
          } else if (item.formatterType == "amount-type") {
            //金额转换
            return (row[temp[0]][temp[1]] / 100).toFixed(2);
          }
        }
      } else {
        //item中无嵌套对象
        let temp = prop.split(".");
        if (item.formatterType == "common-type") {
          //通用类型转换
          let arry = item.formatterInfo;
          for (let i in arry) {
            if (arry[i].value == value) {
              return arry[i].label;
            }
          }
        } else if (item.formatterType == "time-type") {
          //时间标准格式化
          if (!global.isNull(row[temp[0]][temp[1]])) {
            return value.substring(0, value.length - 2);
          }
        } else if (item.formatterType == "amount-type") {
          //金额转换
          return (value / 100).toFixed(2);
        }
      }
    },
  },
};
</script>

3.开始在页面上使用

<el-button type="primary" @click="exportExcel">导出</el-button>
<export-excel-common
      ref="myChild"
      :exportExcelInfo="exportExcelInfo"
      :tableData="allList" //列表数据，不要分页
      :exportExcelArry="exportExcelArry"
    ></export-excel-common>

//script里引入组件
import exportExcelCommon from "@/components/exportExcelCommon";
components: {
    exportExcelCommon,
  },
  data(){
  return{
  //导出表格字段及formatter信息
      exportExcelArry: [
        {
          prop: "approver",
          label: "审批人",
          formatterFlag: false,
        },
        {
          prop: "updateTime",
          label: "修改日期",
          formatterFlag: false,
        },
        {
          prop: "isReceipt",
          label: "是否收货",
          formatterFlag: true,
          formatterType: "common-type",
          formatterInfo: [
            { value: 0, label: "否" },
            { value: 1, label: "是" },
          ],
        },
        ],
        //导出excel表格id及excel名称
      exportExcelInfo: {
        excelId: "record-table",
        excelName: "采购收货单.xlsx",
      },
        allList:[],
  }
  },
  methods:{
  exportExcel() {
  //在这里进行赋值的话要延时调用，等待数据初始化到列表中
      setTimeout(() => {
        this.$refs.myChild.exportExcel();
      }, 500);
    },
  }

formatterFlag正如代码所示，格式化当前列。不用的话设置成false；
formatterType有多种，详情可以看组件的代码

这样导出的列表就是真excel，后端可以识别并进行导入了

2.后端导出前端怎么写

后端大佬承担了导出任务，前端对接接口就行怎么弄呢？

// 通用下载方法
/**
 * 
 * @param {*} url 接口地址
 * @param {*} params 参数
 * @param {*} filename 导出文件名字
 */
let downloadLoadingInstance;
export function download(url, params, filename) {
  downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
  return service.post(url, params, {
    transformRequest: [(params) => { return tansParams(params) }],
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    responseType: 'blob'
  }).then(async (data) => {
    const isLogin = await blobValidate(data);
    if (isLogin) {
      const blob = new Blob([data])
      saveAs(blob, filename)
    } else {
      const resText = await data.text();
      const rspObj = JSON.parse(resText);
      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
      Message.error(errMsg);
    }
    downloadLoadingInstance.close();
  }).catch((r) => {
    console.error(r)
    Message.error('下载文件出现错误，请联系管理员！')
    downloadLoadingInstance.close();
  })
}

可以在main.js挂到vue原型上，这样全局都可以使用啦

import { download } from '@/utils/*****'

Vue.prototype.download = download

页面vue上写方法

 /** 导出按钮操作 */
    handleExport() {
      this.download('/job/export', {
        ...this.queryParams
      }, `job_${new Date().getTime()}.xlsx`)
    }

3.还有一种接口导出方式

首先axios封装后，在接口封装这里

// 导出
export function exportSelect(params) {
  return request({
    url: '/Warehousing/manage/ExportSelectDetail',
    method: 'get',//可以是post
    responseType: "blob",
    headers: {
      'Content-Type': 'application/json'
    },
    data: params //注意post和get传参
  })
}

vue页面上

//第二级详情导出
    async detailExportTwo() {
      let res = await exportSelect({ ...this.params}); //接口
      let blob = new Blob([res], { type: "application/vnd.ms-excel" });
      if (window.navigator.msSaveOrOpenBlob) {
        //兼容 IE & EDGE
        navigator.msSaveBlob(blob, "导出文档.xlsx");
      } else {
        var link = document.createElement("a");
        // 兼容不同浏览器的URL对象
        const url = window.URL || window.webkitURL || window.moxURL;
        // 创建下载链接
        link.href = url.createObjectURL(blob);
        //命名下载名称
        link.download = "导出文档.xlsx";
        //点击触发下载
        link.click();
        //下载完成进行释放
        url.revokeObjectURL(link.href);
      }
    },

喜欢的话点个赞~~~