项目开发中遇到导入表格常见的就是excel和csv 格式，一般情况下我们会前端首先得到这个表格里面的数据，然后再把数据发送给后端，也有的是直接上传文件传给后台后台自己处理，这样就不好控制上传前预览和处理数据，如果不需要预览直接上传的需求，那还是直接上传文件交给后台处理，本文实例是基于vue+elementu-ui 表格去实现。

需要的依赖库--papaparse，xlsx

1.安装

 npm install --save papaparse xlsx

2.文档地址

papaparse：https://www.papaparse.com/

xlsx： https://github.com/SheetJS/sheetjs

函数处理

1.csv 导入函数

import papa from "papaparse";
export function csvImport(file) {
  return new Promise((resolve, reject) => {
    papa.parse(file, {
      header: true,
      skipEmptyLines: true,
      complete: (results, file) => {
        resolve(results);
      }
    });
  });
}

2.excel 导入函数

export function excelImport(file, url) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    // 文件流转BinaryString
    const fixdata = data => {
      let [o, l, w] = ["", 0, 1024];
      for (; l < data.bytelength w l o null new uint8arraydata.slicel w l w w o new uint8arraydata.slicel w return o const getheaderrow='sheet'> {
      const headers = [];
      const range = xlsx.utils.decode_range(sheet["!ref"]); // 表示所有单元格的范围
      let C;
      const R = range.s.r;
      for (C = range.s.c; C <= range.e.c c var cell='sheet[' xlsx.utils.encode_cell c: c r: r var hdr='UNKNOWN' c if cell cell.t hdr='xlsx.utils.format_cell(cell);' headers.pushhdr return headers reader.onload='e'> {
      const data = e.target.result;
      const fixedData = fixdata(data);
      const workbook = xlsx.read(btoa(fixedData), {
        type: "base64"
      });
      const firstSheetName = workbook.SheetNames[0]; // 获取Sheets中第一个Sheet的名字
      const worksheet = workbook.Sheets[firstSheetName]; // 获取第一个Sheet的数据
      const header = getHeaderRow(worksheet);
      /**
       * xlsx.utils.sheet_to_csv：生成CSV格式
       * xlsx.utils.sheet_to_txt：生成纯文本格式
       * xlsx.utils.sheet_to_html：生成HTML格式
       * xlsx.utils.sheet_to_json：输出JSON格式
       */
      const results = xlsx.utils.sheet_to_json(worksheet); // 常用导出类型
      resolve({
        header,
        results
      });
    };
    reader.readAsArrayBuffer(file);
  });
}

导入测试

<script>
import * as importFun from './import.js'
export default {
  methods: {
    handleUpload(file) {
      importFun.excelImport(file).then(res => {
        console.log(res, 'ff')
      })
    },
  }
}
</script>

组件封装

把csv和xlsx 的导入函数集合到一个js文件中后续使用调用

使用组件

<script>
export default {
  data() {
    return {
      errorData: {
        columns: [],
        data: []
      }
    }
  },
  methods: {
    handleImport(data) {
      console.log(data, 'data')
      // 调用接口
    }
  }
}
</script>

组件参数说明：

type： 导入类型-csv/xlsx

errorData: 导入失败错误数据

import： 导入方法-或者数据

效果展示

总结

本文只介绍展示了前端处理，没有加接口调用实例，具体后台导入的时候需要什么格式的数据，实际情况实际处理，基本代码差不多都在上面了，完整代码放码云上了[upholdjx / tao-form]。

往期文章

Vue前端开发——组件篇
Vue前端开发-表单封装
Vue 前端开发——打印功能实现
Vue前端开发——制作二维码
Vue前端开发——数据交互axios
Vue前端开发——使用高德地图WebApi
uni-app 项目开发基础搭建