XLSX + VUE获取表格内容，实现下载模板、导入表格、导出表格功能

安装依赖

npm install xlsx --save

template-用的element

          <el-upload
            :file-list="fileList"
            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            class="btn"
            :auto-upload="false"
            :show-file-list="false"
            :limit="1"
            :on-change="uploadfile"
          >
            导入
          </el-upload>

导入表格

接受el-input传过来的文件流，使用xlsx读取内容

    uploadfile(file) {
      console.log("上传的文件", file);
      let _this = this;
      let f = file.raw;
      let rABS = false; //是否将文件读取为二进制字符串

      let reader = new FileReader();
      //if (!FileReader.prototype.readAsBinaryString) {
      FileReader.prototype.readAsBinaryString = function (f) {
        let binary = "";
        let rABS = false; //是否将文件读取为二进制字符串
        let wb; //读取完成的数据
        let outdata;
        let reader = new FileReader();
        reader.onload = function (e) {
          let bytes = new Uint8Array(reader.result);
          let length = bytes.byteLength;
          for (let i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          let XLSX = require("xlsx");
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化
              type: "base64",
            });
          } else {
            wb = XLSX.read(binary, {
              type: "binary",
            });
          }
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西

          const keyObj = {
            序号: "id",
            情况跟踪: "track",
            日期: "date",
            标题: "title",
            状态: "status",
            结果: "result",
            预警: "warning",
          };

          outdata.forEach((item) => {
            // 将中文的键名替换成英文的
            for (let k in keyObj) {
              let newKey = keyObj[k];
              if (newKey) {
                item[newKey] = item[k];
                delete item[k];
              }
            }
          });
          console.log(outdata);
        };
        reader.readAsArrayBuffer(f);
      };
      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    },

上传的文件

读取结果

导出文件

创建exportExcel.js

/* eslint-disable */
/* 导出excel文件 */
 
/**
 * 导出excel文件实现思路分析
 *
 * 1.通过XLSX插件的 XLSX.utils.book_new()方法，创建excel工作蒲对象wb。
 * 2.按需插入第一行数据，通过数组的unshift()方法。
 * 3.通过XLSX.utils.json_to_sheet(),创建excel表格对象ws。
 * 4.通过json_to_array(key，data),结合自定义的字段名key，和数据记录data，生成新数组。
 * 5.通过auto_width(),对ws和新生成的数组，自动计算各列col宽。
 * 6.通过XLSX.utils.book_append_sheet(),生成实际excel工作蒲，并使用XLSX.writeFile()生成excel文件。
 */
 
import XLSX from 'xlsx'
 
// 自动计算col列宽
function auto_width (ws, data) {
  /*set worksheet max width per col*/
  const colWidth = data.map(row => row.map(val => {
    /*if null/undefined*/
    if (val == null) {
      return { 'wch': 10 }
    }
    /*if chinese*/
    else if (val.toString().charCodeAt(0) > 255) {
      return { 'wch': val.toString().length * 2 }
    } else {
      return { 'wch': val.toString().length }
    }
  }))
  /*start in the first row*/
  let result = colWidth[0]
  for (let i = 1; i < colWidth.length; i++) {
    for (let j = 0; j < colWidth[i].length; j++) {
      if (result[j]['wch'] < colWidth[i][j]['wch']) {
        result[j]['wch'] = colWidth[i][j]['wch']
      }
    }
  }
  ws['!cols'] = result
}
 
// 将json数据转换成数组
function json_to_array (key, jsonData) {
  return jsonData.map(v => key.map(j => {
    return v[j]
  }))
}
 
/**
 * @param header Object，表头
 * @param data Array，表体数据
 * @param key Array，字段名
 * @param title String，标题（会居中显示），即excel表格第一行
 * @param filename String，文件名
 * @param autoWidth Boolean，是否自动根据key自定义列宽度
 */
export const exportJsonToExcel = ({
  header,
  data,
  key,
  title,
  filename,
  autoWidth
}) => {
  const wb = XLSX.utils.book_new()
  if (header) {
    data.unshift(header)
  }
  if (title) {
    data.unshift(title)
  }
  const ws = XLSX.utils.json_to_sheet(data, {
    header: key,
    skipHeader: true
  })
  if (autoWidth) {
    const arr = json_to_array(key, data)
    auto_width(ws, arr)
  }
  XLSX.utils.book_append_sheet(wb, ws, filename)
  XLSX.writeFile(wb, filename + '.xlsx')
}
export default {
  exportJsonToExcel
}

在页面引入这个js,传递要导出的数据

import exportExcel from "../../components/exportExcel.js"

    beforeExport(arr) {
      // 导出表格
      if(arr && arr.length>0){
        let data = JSON.parse(JSON.stringify(arr));
        console.log(data)
        this.loading=true;
        let title ={}
        let key =[]
        //循环字段，这段看自己的表单需要哪些字段
        this.keys.forEach((item)=>{
          if(item.key){
            key.push(item.key);
          }
         title[item.key]=item.title
        })
        let obj ={
          header:title,
          data:data,
          key:key,
          title:"",
          filename:"事项清单",
          autoWidth:true
        }
        exportExcel.exportJsonToExcel(obj);
        this.loading=false;
      }
    },

下载模板

用的vue3,把模板放在可以被调用静态资源的文件夹中，我放在了public/static/file下

使用a标签,写上路径＆download属性，就可以了，这里的路径是相对于public的index.html写的

          <a class="btn" href="./static/file/temp.xls" download="temp.xls">
            <Download class="addarea" />//图标来的
            下载
          </a>

题外

单纯的文件下载可以用windows.location,href=文件路径，直接下载