Vue 前端开发——导入Excel/Csv

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

需要的依赖库--papaparse，xlsx

https://www.papaparse.com/

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 += String.fromCharCode.apply(          null,          new Uint8Array(data.slice(l * w, l * w + w))        );      }      o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * 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.push(hdr);      }      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);  });}

导入测试

<template>  <div>    <el-upload :before-upload="handleUpload"               size="small"               action="default">      <el-button type="success"                 size="small">        选择要导入的数据      </el-button>    </el-upload>  </div></template><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文件中后续使用调用

import.js

tao-import 组件

使用组件

<!-- * @Author: 择偶时分 * @Date: 2020-09-12 10:53:43 * @LastEditTime: 2020-09-12 12:42:26 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit--><template>  <div>    <tao-import type="csv"                :errorData="errorData"                @import="handleImport" />  </div></template><script>export default {  data() {    return {      errorData: {        columns: [],        data: []      }    }  },  methods: {    handleImport(data) {      console.log(data, 'data')      // 调用接口    }  }}</script>

组件参数说明：

type：导入类型-csv/xlsx

vue前端开发(Vue 前端开发——导入Excel-Csv)