Vue小模块之功能全面的表格（十）表格数据的Excel导入

Vue小模块之功能全面的表格（十）表格数据的Excel导入

技术栈

Vue全家桶：
前端框架 Vue.js
状态管理 Vuex
动态路由匹配 vue-router
http服务 axios
模块打包 webpack
UI框架 element
数据服务器
服务器端 node.js
基于node的web框架 express
分布式数据库 mongodb
mongodb工具 mongoose

上传文件对话框

上传对话框显示属性，上传成功方法，上传路径

data() {
    return {
        //...
        uploadShow: false,
    }
},
methods: {
    //...
    uploadSuccess(res) {
        alert(res)
    }
},
computed: {
    //...
    uploadUrl() {
        return `${this.$ajax.defaults.baseURL}todos/upload`
    }
}

上传文件对话框

 
 <el-dialog title="上传文件" :visible.sync="uploadShow">
    <el-upload :action="uploadUrl" :on-success="uploadSuccess">
        <el-button type="primary" icon="el-icon-upload">上传el-button>
    el-upload>
    <span slot="footer">
        <el-button type="danger" icon="el-icon-close" @click="uploadShow=false">关闭el-button>
    span>
el-dialog>

后台部分

用npm安装formidable和node-xlsx两个包

npm i -s formidable node-xlsx

编辑server项目中router.js

// 引入
var formidable = require('formidable')
var node_xlsx = require('node-xlsx')

// 将字符串转化为日期
function convertDate(s) {
    console.log(s)
    let data = s.split('/')
    let year = parseInt(data[0])
    let month = parseInt(data[1])-1
    let day = parseInt(data[2])
    return new Date(year, month, day)
}

router.route('/upload').post((req, res) => {
    let form = new formidable.IncomingForm()
    form.encoding = 'utf-8'
    form.parse(req, (err, fields, files) => {
        let workbook = node_xlsx.parse(files.file.path)
        // workbook[0] 即 sheet1 中的数据， 再用slice去掉表头
        let data = workbook[0].data.slice(1)
        for(let item of data){
            let tmp = {}
            tmp.name = item[0]
            tmp.author = item[1].split(',')
            tmp.status = 0
            tmp.completeDate = convertDate(item[2])
            let todo = await Todo.create(tmp)
        }
        res.send('导入完成')
    })
})

完善前端

回到client项目，在接受到成功消息后更新数据，关闭对话框

uploadSuccess(res) {
    this.$notify({
        type: 'success',
        message: res
    })
    this.update()
    this.uploadShow = false
}

测试

创建一个Excel文件，输入测试数据（可输入多条）

导入后效果

小结

表格实现了增删改查，excel导入导出等功能，源代码下载地址
github地址