xlsx导出与导入

---

前言

👨‍💻👨‍🌾📝记录学习成果，以便温故而知新

链接: xlsx官网
讲实话，文档可能不是专门针对VUE写的，所以只能说一般般

---

一、安装组件

cnpm install xlsx

用上面的安装方法，安装的版本如文档所说：

The latest version on that registry is 0.18.5

npm rm --save xlsx
npm i --save https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz

文档中介绍的安装方法，貌似安装的是现在写文章时的最新版本。不过没有试过文档中的安装方法。

二、导出

1.引入组件

import { utils, writeFile } from 'xlsx';

2.导出代码

（1）导出数组

代码：

	onExportArray(){
      const data = [
        ['姓名', '年龄'],
        ['Alice', 20],
        ['Bob', 25],
        ['Charlie', 30]
      ]

      const ws = utils.aoa_to_sheet(data)
      const wb = utils.book_new()
      utils.book_append_sheet(wb, ws, 'Sheet1')
      writeFile(wb, 'data.xlsx')
    },

Excel效果：

（2）导出JSON

代码：

data () {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },


	onExportJson(){
      const ws = utils.aoa_to_sheet([['日期', '姓名', '地址']])
      utils.sheet_add_json(ws, this.tableData, {skipHeader: true, origin: "A2"});
      const wb = utils.book_new()
      utils.book_append_sheet(wb, ws, 'Sheet1')
      writeFile(wb, 'data.xlsx')
    }

Excel效果：

三、导入

1.引入组件

import { read, utils } from 'xlsx';

2.导入代码

代码：

<div>
    <el-upload
      class="upload-demo"
      action=""
      :before-upload="upload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="3"
      :on-exceed="handleExceed"
      :file-list="fileList">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>

  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    upload(file, fileList) {
      let files = { 0: file };
      this.readExcel1(files);
    },
    readExcel1(files) {
      // 如果没有文件名
      if (files[0].name.length <= 0) {
        return;
      }
      if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
          this.$message.error('上传格式不正确，请上传xls或者xlsx格式');
          return;
      }
      const fileReader = new FileReader();
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
            const workbook = read(data, {
              type: 'binary',
            });
            // 取第一张表
            const wsname = workbook.SheetNames[0];
            // 生成json表格内容
            const ws = utils.sheet_to_json(workbook.Sheets[wsname]);
            console.log(ws);
            // 后续数据的处理
            
        } catch (e) {
          return false;
        }
      };
      fileReader.readAsBinaryString(files[0]);
    }
  }

控制台打印导入效果：