项目中Excel的导入导出功能的实现

最新推荐文章于 2024-01-04 08:33:42 发布

金凯枫

最新推荐文章于 2024-01-04 08:33:42 发布

阅读量283

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_73596760/article/details/129763516

版权

1.导入功能

基于vue-element-admin 提供的 UploadExcel 组件，拷贝到项目的 components 目录。
全局注册，components/index.js。

安转依赖需要使用 npm 包 xlsx，所以需要安装 xlsx 插件。

npm i xlsx@0.17.0
# 如果出现 core-js 相关的报错，可以执行下面代码尝试
# npm i core-js

安装完成之后可以在项目引用这个导入组件啦.

// 用到组件的页面
<template>
  <UploadExcel :before-upload="beforeUpload" :on-success="handleSuccess" />
</template>
<script>
    export default {
        name: 'Import',
        methods: {
            // 上传成功
            handleSuccess(o) {
            // o 表示上传的文件
                console.log(o)
            },
            // 上传前校验
            beforeUpload(file) {
                // file.size 的单位是字节 B
                const isLt1M = file.size / 1024 / 1024 < 1
                if (isLt1M) {
                    return true
                }
                this.$message({
                    message: 'Please do not upload files larger than 1m in size.',
                    type: 'warning'
                })
                return false
            }
        }
    }
</script>

这个是导入组件的两个自定义属性:before-upload="beforeUpload" :on-success="handleSuccess".自定义属性相对应的两个监听回调

2.导出功能

1.同样基于 vue-element-admin 提供的 Excel导出组件迁移到自己的项目中

2. Excel 的导入导出都是依赖于 xlsx 来实现的，导出功能在 xlsx 的基础上又封装了 Export2Excel.js 文件。

3.安装导出 Excel 所需依赖。

npm i file-saver
# 处理压缩包
npm i script-loader -D

4.导出的话,后端可以做,前端也可以做,相对于前端,后端处理比较简单

export default {
    name: 'Employees',
    methods: {
        exportData() {
            // #1 懒加载的方式导入第三方包 提高性能
            import('@/vendor/Export2Excel').then((excel) => {
                // #2 调用导出方法
                excel.export_json_to_excel({
                    // #3 准备表头，必填
                    header: ['手机号', '姓名', '入职日期', '聘用形式', '转正日期', '工号', '部门'],
                    // #4 准备具体数据，必填
                    data: [
                        ['管理员', '13800000002', '2018-11-02', '正式', '2018-11-30', '9002', '总裁办'],
                        ['孙财', '13800000003', '2018-11-04', '正式', '2018-11-20', '111', '市场部'],
                    ],
                    // #5 文件名，非必填
                    filename: '学生信息表',
                    // #6 列宽是否自适应，非必填
                    autoWidth: true,
                    // #7 文件后缀名，非必填
                    bookType: 'xlsx',
                })
            })
        }
    }
}

5.复杂表头多了两个参数如下