在vue中上传excel以及下载excel模板

项目需求

页面中可通过“添加功能”一个个的添加每个系统相应角色的负责人，但有时候有的需要批量添加，同时又需要提供模板供用户填写

操作步骤

找到合适的excel相关的插件

1. 我这里最后使用的xlsx插件，详细信息见[link]https://www.npmjs.com/package/xlsx
2. 这位大大的分享也是我在做的时候对我理解这个插件帮助比较大的[link]https://www.jianshu.com/p/31534691ed53

安装插件

$ npm install xlsx

在要使用的文件里引入插件

import XLSX from ‘xlsx’

在文件中使用

<template>
    <span class="excel-upload">
        <!-- 为了覆盖批量导入input type="file"的样式所写的 -->
        <span class="choose-file">
            <input type="file" @change="readExcel($event)">
            <el-button class="over-button" type="success" icon="el-icon-plus" size="small" plain>批量导入</el-button>
        </span>

        <!-- 导入模板下载按钮 -->
        <el-button type="success" @click="downloadTemplate()" size="small" plain>导入模板下载</el-button>

        <!-- 导入信息确认对话框 -->
        <el-dialog title="导入信息确认" :visible.sync="importConfirmDialog" width="1200px" :close-on-click-modal="false">
            <el-table :data="sheetDataArr.slice(pageSize*(currentPage - 1), pageSize*currentPage)"
                      header-cell-class-name="excel-upload-table-header"
                      class="excel-upload-table">
                <el-table-column prop="name" label="功能名"></el-table-column>
                <el-table-column prop="策划" label="策划"></el-table-column>
                <el-table-column prop="技术" label="技术"></el-table-column>
                <el-table-column prop="QA" label="QA"></el-table-column>
                <el-table-column prop="美术" label="美术"></el-table-column>
            </el-table>
            <div class="pagination-div">
                <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="sheetDataArr.length">
                    </el-pagination>
            </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="importConfirmDialog = false">取 消</el-button>
            <el-button type="primary" @click="submitExcelUpload">确 定</el-button>
          </span>
        </el-dialog>
    </span>
</template>
<script>
import XLSX from 'xlsx'
export default {
  name: 'ExcelUpload',
  data(){
      return {
           templateData:[ // 导出的excel模板数据
              {
                  系统名称: '系统名称1',
                  策划: '张三',
                  技术:'李四, 王五',
                  QA: '小宝',
                  美术: '',
              },
          ],       
          sheetDataArr: [ // 导入的excel表数据
               {
                  系统名称: '系统名称1',
                  策划: ['张三'],
                  技术:['李四','王五'],
                  QA: ['小宝'],
                  美术: [],
              },           
          ],
          importConfirmDialog: false,
          currentPage: 1 ,
          pageSize: 10,
      }
  },
   computed: {
    projectId: function() {
        return this.$route.params.projectId;
    },
   },
  methods: {
    // 点击下载模板调用的函数
    downloadTemplate(){
        let ws = XLSX.utils.json_to_sheet(this.templateData)
        let wb = XLSX.utils.book_new()
        let xlsxName = '模板文件'
        XLSX.utils.book_append_sheet(wb, ws, xlsxName)
        XLSX.writeFile(wb, xlsxName + ".xlsx")
    },
    // 上传excel文件后马上回调用的函数
    readExcel(event) {
        // console.log('进来了')
        let file = event.target.files[0]
        let reader = new FileReader()
        reader.onload = (e) => {
            let data = e.target.result
            // 读取工作簿
            let workbook = XLSX.read(data, {type: "binary"})
            // 工作表名称集合
            let sheetNames = workbook.SheetNames;
            // 此处只读取第一张sheet
            let worksheet = workbook.Sheets[sheetNames[0]];
            // 将读取到的第一张sheet的数据转换为json格式，类似于data中的templateData
            let sheetDataArr = XLSX.utils.sheet_to_json(worksheet);
         
            // 将逗号分隔的多个用户转为数组形式
            let handleArr = []
            for(let item of sheetDataArr){
                let mailToArr = { name: item['功能名'], 策划: [], 技术: [], QA: [], 美术: [] ,project: this.projectId}
                let mailToArr['策划'] = item['策划'] ? item['策划'].split(/\s*(,|，)\s*/) : [] //正则是为了预防用户输入多人时，逗号不分中英文或者有好几个空格情况的出现
                let mailToArr['技术'] = item['技术'] ? item['技术'].split(/\s*(,|，)\s*/): []
                let mailToArr['QA'] = item['QA'] ? item['QA'].split(/\s*(,|，)\s*/): []
                let mailToArr['美术'] = item['美术'] ? item['美术'].split(/\s*(,|，)\s*/): []
               handleArr.push(mailToArr)
            }
            // sheetDataArr里面就是从excle文件里读取到的数据啦，格式类似于data中的sheetDataArr
            this.sheetDataArr = handleArr
            // 打开导入信息确认框
            this.importConfirmDialog = true
        }
        reader.readAsBinaryString(file)

    },

    // 确定批量添加的api以及确认框等操作
    submitExcelUpload(){
        this.$http.post('',this.sheetDataArr
        ).then(response => {
            this.importConfirmDialog = false;
            this.$alert(response['data']['msg']);
        })      
    },
    // 修改每页数据数量
    handleSizeChange(val) {
        this.pageSize = val
    },
    // 翻页
    handleCurrentChange(val) {
        this.currentPage = val
    },

  }
}
</script>
<style scoped lang="less">
    .choose-file{
        width:90px;
        margin-left:5px;
        position:relative;
        overflow:hidden;
        cursor: pointer;
    }
    input[type="file"]{
        width:90px;
        overflow:hidden;
        position:absolute;
        top:0;
        left:0;
        opacity:0;
    }
    .pagination-div{
        margin: 20px 30px 0 0;
        text-align: right;
    }
    .excel-upload-table{
        width:96%;
        margin-top:20px;
    }
</style>