vue 读取excel内容

已于 2022-06-24 15:40:02 修改
阅读量8.3k 收藏 27
点赞数 7
分类专栏： javascript vue.js 文章标签： vue.js javascript 前端
于 2022-06-02 14:23:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tdjqqq/article/details/125099815
版权

tips：

文件地址（按需自己改造去）https://download.csdn.net/download/tdjqqq/85761940

xlsx.js读取日期时，如果默认转成js日期的话，会比正常的时间少43秒，设置日期读取时，直接转成字符串即可，如下图所示，那么转换后的数据就是字符串型日期："2022-05-09"，如果需要到具体时分秒，请自行减43秒。

//转换数据
                    //let tempSheetData = _this.handleGetData(XLSX.utils.sheet_to_json(workSheet))
                    let tempSheetData = XLSX.utils.sheet_to_json(workSheet, {
                        defval: null            //单元格为空时的默认值
                        , raw: false            //使用w的值而不是v
                        , dateNF: 'yyyy-MM-dd'   //日期格式
                    })

1 需要安装如下依赖内容，该依赖也可以导出excel

npm install -S file-saver
npm install -S xlsx
npm install -S xlsx-style
npm install -D script-loader

2 读取excel内容

说明：

  1. excel表必须要有工作表（sheet）,且隐藏的工作表也会一起读取
  2. 结果会以对象形式导出
  3. 我用的组件是ant-vue
  4. 注意，你的上传组件方法，传参中一定要有file，el-element可用on-change，且注意ACTIONS要为空，否则只能读取一次

 组件如下：

<template>
    <div class="excel-reader">
        <a-upload name="avatar" class="avatar-uploader" v-loading="loading" :show-upload-list="false"
            :before-upload="handleBeforeUpload">
            <a-button title="读取Excel">
                <a-icon type="file-excel" /> Excel Reader
            </a-button>
        </a-upload>
    </div>
</template>
  
<script>
var XLSX = require('xlsx')
import { readFile } from './excelRreadFile.js'; //读取excel文件方法

export default {
    name: 'ViExcelReader',
    props: {
        allowed: {
            type: Array,
            default () {
                //类型列表
                return [
                    'xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                    'xls', "application/vnd.ms-excel",
                    'csv', "text/csv"]
            },
        },
    },
    data () {
        return {
            loading: false
        }
    },
    // 定义引入的组件
    components: {},
    //变量监听
    watch: {},
    // 页面初始化
    created () { },
    // 页面DOM加载完成
    mounted () {

    },
    //离开页面时执行
    destroyed () { },
    // 页面方法
    methods: {
        async handleBeforeUpload (file) {
            //选择文件后
            let _this = this

            _this.showLoading(true)

            //检测文件类型
            if (!_this.checkFileType(file)) {
                _this.$common.showMsg({
                    type: 'error',
                    content: `抱歉，请选择excel文件`,
                })

                _this.showLoading(false)
                return false
            }

            //选择excel文件后，并读取其内容（文件流）
            let dataBinary = await readFile(file)
            if (dataBinary != null) {
                // 将整个文件以二进制形式读取
                let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })

                // 工作表数量
                let workBookLen = workBook.SheetNames.length
                
                // excel工作簿内容
                let excelBook = []

                //读取每个sheets表
                for (let i = 0; i < workBookLen; i++) {
                    let workSheet = workBook.Sheets[workBook.SheetNames[i]]
                    excelBook.push({
                        sheetName: workBook.SheetNames[i],
                        data: XLSX.utils.sheet_to_json(workSheet, {
                        defval: null            //单元格为空时的默认值
                        , raw: false            //使用w的值而不是v
                        , dateNF: 'yyyy-MM-dd'   //日期格式
                        })
                    })
                }

                _this.showLoading(false)
                console.log({
                    name: file.name,
                    length: workBookLen,
                    data: excelBook
                })
                //导出工作表内容
                _this.$emit("onChange", {
                    name: file.name,
                    length: workBookLen,
                    data: excelBook
                })

            }
        },

        showLoading (val) {
            let _this = this
            _this.loading = val
        },
        checkFileType (file) {
            let _this = this

            let flog = false

            //得到上传文件的值
            let fileName = file.name

            //取其类型
            let fileType = fileName.lastIndexOf('.')

            //返回位于String对象中指定位置的子字符串并转换为小写.
            let extension = fileName
                .substring(fileType)
                .toLowerCase()
                .replace('.', '')
            //判断允许上传的文件格式
            if (_this.allowed.includes(extension)) {
                flog = true
            } else {
                flog = false
            }

            return flog
        }
    },
}
</script>
 
<style lang="less" scoped>
.excel-reader {
    display: inline-block;
    .ant-upload-text {
    }
}
</style>

excelRreadFile.js

export const readFile = (file) => {
    return new Promise((resolve) => {
        if (window.FileReader) {
            let reader = new FileReader()
            //将文件读取为二进制码
            reader.readAsBinaryString(file)

            //文件读取成功完成时，若失败，结果为null，否则为读取的结果
            reader.onload = (ev) => {
                resolve(ev.target.result)
            }
        } else {
            //不支持，返回结果为null
            alert('抱歉，您的浏览器，无法支持读取文件功能！')
            resolve(null)
        }
    })
}

只有一张工作表的excel，及结果 

 

有多张工作表的excel，及结果 

 

自动转数据格式版本

<template>
    <div class="excel-reader">
        <a-upload name="avatar" class="avatar-uploader" v-loading="loading" :show-upload-list="false"
            :before-upload="handleBeforeUpload">
            <a-button title="读取Excel">
                <a-icon type="file-excel" /> Excel Reader
            </a-button>
        </a-upload>
    </div>
</template>
  
<script>
var XLSX = require('xlsx')
import { readFile } from './excelRreadFile.js'; //读取excel文件方法

export default {
    name: 'ViExcelReader',
    props: {
        allowed: {
            type: Array,
            default () {
                //类型列表
                return [
                    'xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                    'xls', "application/vnd.ms-excel",
                    'csv', "text/csv"]
            },
        },
        transFiled: {
            type: Object,
            default () {
                return {
                    origin: 'zh',
                    target: 'field'
                }
            }
        },
        header: {
            type: Array,
            default () {
                return [{
                    field: 'no',//字段列
                    zh: '序号',//excel的标题
                    en: 'No',//转换的列名
                },
                {
                    field: 'student_name',//字段列
                    zh: '姓名',//excel的标题
                    en: 'student name',//转换的列名
                },
                {
                    field: 'chinese',//字段列
                    zh: '语文',//excel的标题
                    en: 'chinese',//转换的列名
                },
                {
                    field: 'math',//字段列
                    zh: '数学',//excel的标题
                    en: 'math',//转换的列名
                },
                {
                    field: 'english',//字段列
                    zh: '英语',//excel的标题
                    en: 'english',//转换的列名
                },
                {
                    field: 'exam_date',//字段列
                    zh: '考试日期',//excel的标题
                    en: 'exam date',//转换的列名
                },
                ]
            },
        },
        field: {
            type: Array,
            default () {
                return []
            },
        },
    },
    data () {
        return {
            loading: false
        }
    },
    // 定义引入的组件
    components: {},
    //变量监听
    watch: {},
    // 页面初始化
    created () { },
    // 页面DOM加载完成
    mounted () {

    },
    //离开页面时执行
    destroyed () { },
    // 页面方法
    methods: {
        async handleBeforeUpload (file) {
            //选择文件后
            let _this = this

            _this.showLoading(true)

            //检测文件类型
            if (!_this.checkFileType(file)) {
                _this.$common.showMsg({
                    type: 'error',
                    content: `抱歉，请选择excel文件`,
                })

                _this.showLoading(false)
                return false
            }

            //选择excel文件后，并读取其内容（文件流）
            let dataBinary = await readFile(file)
            if (dataBinary != null) {
                // 将整个文件以二进制形式读取
                let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true, cellText: false })

                // 工作表数量
                let workBookLen = workBook.SheetNames.length

                // excel工作簿内容
                let excelBook = []

                //读取每个sheets表
                for (let i = 0; i < workBookLen; i++) {
                    let workSheet = workBook.Sheets[workBook.SheetNames[i]]

                    //转换数据
                    let tempSheetData = []
                    if (Object.keys(_this.transFiled).length == 0 || _this.header.length == 0) {
                        //默认导出，不转换
                        tempSheetData = XLSX.utils.sheet_to_json(workSheet, {
                            defval: null            //单元格为空时的默认值
                            , raw: false            //使用w的值而不是v
                            , dateNF: 'yyyy-MM-dd'   //日期格式
                        })
                    } else {
                        //根据实际情况导出
                        tempSheetData = _this.handleGetData(XLSX.utils.sheet_to_json(workSheet, {
                            defval: null            //单元格为空时的默认值
                            , raw: false            //使用w的值而不是v
                            , dateNF: 'yyyy-MM-dd'   //日期格式
                        }))
                    }

                    excelBook.push({
                        sheetName: workBook.SheetNames[i],
                        data: tempSheetData
                    })
                }

                _this.showLoading(false)
                console.log({
                    name: file.name,
                    length: workBookLen,
                    data: excelBook
                })
                //导出工作表内容
                _this.$emit("onChange", {
                    name: file.name,
                    length: workBookLen,
                    data: excelBook
                })

            }
        },
        handleGetData (data) {
            //转换数据
            let _this = this
            if (data.length == 0) {
                return []
            }

            let resultArr = []
            data.filter(item => {
                let row = {}
                for (let i in item) {
                    for (let m = 0; m < _this.header.length; m++) {
                        let mItem = _this.header[m]
                        if (mItem[_this.transFiled.origin] == i) {
                            row[mItem[_this.transFiled.target]] = item[i]
                            break
                        }
                    }
                }
                resultArr.push(row)
            })

            return resultArr
        },
        showLoading (val) {
            let _this = this
            _this.loading = val
        },
        checkFileType (file) {
            let _this = this

            let flog = false

            //得到上传文件的值
            let fileName = file.name

            //取其类型
            let fileType = fileName.lastIndexOf('.')

            //返回位于String对象中指定位置的子字符串并转换为小写.
            let extension = fileName
                .substring(fileType)
                .toLowerCase()
                .replace('.', '')
            //判断允许上传的文件格式
            if (_this.allowed.includes(extension)) {
                flog = true
            } else {
                flog = false
            }

            return flog
        }
    },
}
</script>
 
<style lang="less" scoped>
.excel-reader {
    display: inline-block;
    .ant-upload-text {
    }
}
</style>

结论：

千万要注意，隐藏的sheet表也会被读取出来的，且转换后的数据，会以中文为标题出现，有需要的朋友可以转换下对象，否则可能会有问题。 

小三金
关注
专栏目录
前端vue导入excel并读取内容
qq_41117240的博客
10-18 4318
前端vue导入读取excel内容
SpringBoot+AntDesignVue实现excel导入功能
07-20
SpringBoot+AntDesignVue 实现 Excel 导入功能 在本篇文章中，我们将介绍如何使用 SpringBoot 和 AntDesignVue 实现 Excel 导入功能。这个功能主要是使用 Ant Design Vue 中的 upload 组件来实现导入 excel 文件的...
vue读取本地的excel文件并显示在网页上方法示例
10-16
主要介绍了vue读取本地的excel文件并显示在网页上方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue读取excel表格内容
weixin_46058007的博客
05-15 2489
vue项目读取excel文件内容，安装xlsx第三方工具
Vue：使用vue-json-excel导出数据到excel
2401_87029923的博客
09-10 624
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！x: “女”, phone: 15521103211},由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！[外链图片转存中…(img-pfHH1Tb8-1725933002498)][外链图片转存中…(img-ddt63Zl5-1725933002499)]
VUE读取execl文件
Jw_1201的博客
02-01 3116
VUE读取execl文件 实现页面预览数据
vue读取excel文件数据
FANCUNY的博客
01-26 599
1、文件上传按钮 ，这里用的是elment组件库，所以按钮是el-button，根据自己所使用的酌情更改就行。
Vue 读取excel文件的两种方式
noeal的博客
11-23 1万+
Vue 读取 excel 文件
vue导出excel组件
06-24
在Vue.js框架中，开发人员经常需要为用户提供数据导出功能，例如将表格数据导出为Excel文件。Vue导出Excel组件就是为了解决这个问题而设计的，它使得在Vue2.x项目中实现这一功能变得简单高效。Vue.js是一个轻量级、...
vue 读取excel 内容
06-05
Vue的数据绑定功能非常强大，很适合用来读取Excel内容。但是直接读取Excel文件需要借助第三方库。常用的Excel文件处理库有js-xlsx和xlsx。 首先，需要在Vue项目中安装xlsx或js-xlsx库。可以使用npm或yarn进行安装，...
vue---读取Excel文档内容
string佳佳的博客
05-13 1839
1、利用elementUI的上传组件el-upload 2、还要使用到 xlsx 插件 下载：npm install --save-dev xlsx 3、如果表格很复杂，一定要把这个文件做成多表格形式，否则无法正常读取内容。如： 例子 <el-upload ref="upload" action="https://jsonplaceholder.typicode.com/posts/" class="upload-demo" accept="x
vue读取Excel文件内容
qq_44745401的博客
08-31 2016
vue 解析Excel文件
Vue 读取Excel内容
xy的博客
12-09 492
theme: smartblue 参考 https://segmentfault.com/a/1190000042972903 https://blog.csdn.net/liyi_mowu/article/details/84768140 https://blog.csdn.net/Smile_666666/article/details/123297477 环境搭建 安装依赖：...
Vue中如何导入并读取Excel数据
热门推荐
a736755244的博客
08-14 4万+
vue+xlsx导入excel并读取数据
vue 读取本地excel文件
LiChengzhong的博客
06-30 2550
vue 读取本地excel文件
vue 获取 excel 文件中的数据
Hruibin的博客
06-23 1868
解析excel文件中数据
vue实现excel文件的导入和读取
bu_xiang_tutou的博客
03-12 5577
上传数据前上传数据后或者。
vue中使用xlsx读取excel文件
捂耳听风的博客
01-12 4868
可以发现fileList是一个类数组，由传入的file对象组成。每个file对象包含一下属性：
vue读取本机的excel文件的两种方式
mao_mao37的博客
03-13 1771
安装依赖 npm install xlsx 引入 import XLSX from 'xlsx' 第一种input通常方式 template中加入input <input type="file" ref="upload" accept=".xls,.xlsx" class="outputlist_upload"> data中声明变量 data() { return ...
前端vue3excel导入导出
最新发布
10-16
Vue3中使用Excel导入导出通常通过第三方库如`vue-exceljs`或`xlsx`来实现。以下是简要步骤： 1. **安装库**： 首先，你需要在项目中安装相关的库。如果是`vue-exceljs`，可以使用npm或yarn命令： ```bash npm install vue-exceljs --save # 或者 yarn add vue-exceljs ``` 2. **导入并使用**： 在你的Vue组件中引入并使用这个库： ```javascript import { createExcelWriter } from 'vue-exceljs'; export default { methods: { handleExport(data) { const writer = createExcelWriter({ filename: 'output.xlsx', // 输出文件名 data, // 这里的数据应该是你想写入的工作表内容，例如数组或对象数组 }); // 写入数据到Excel writer.addWorksheets(data); // 导出文件 writer.writeFile(); }, handleImport(file) { // 使用fileReader处理上传的文件，然后解析数据 let fileReader = new FileReader(); fileReader.onload = function (e) { let workbook = XLSX.read(e.target.result, { type: 'binary' }); // 接下来你可以操作workbook来获取数据 }; fileReader.readAsBinaryString(file); } } } ``` 3. **事件监听**： 对于文件上传，你可以在HTML部分添加一个`<input>`元素，并监听其`change`事件来触发导入操作。 注意，`vue-exceljs`主要用于导出，如果你需要更复杂的功能，比如读取特定格式的Excel文件，可能需要结合其他工具，如`xlsx`。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值