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

Posted 2022-11-29 究极死胖兽

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.baseURLtodos/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地址