(前端导入)Vue+Element中EXCEL导入操作

Götter.

已于 2024-03-29 23:02:12 修改

阅读量940

点赞数

分类专栏： Vue 文章标签：学习 javascript vue.js elementui

于 2023-03-14 00:37:45 首次发布

本文链接：https://blog.csdn.net/qq_54878219/article/details/129512051

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章讲述了如何在终端通过npm安装xlsx库，并使用该库读取Excel文件。在Vue.js环境中，通过文件输入标签选择Excel文件，然后读取文件内容，将其转化为二进制字符串并解析为JSON对象。此外，还展示了如何结合Element-UI组件美化文件选择按钮。

摘要由CSDN通过智能技术生成

在终端安装xlsx 对应版本

npm i xlsx@0.16.8

选择EXCEL文件代码

<!-- 选择excel文件 -->
<input ref="upload" type="file" accept=".xlsx,.xls" @change="onImportExcel" />

methods中添加方法


//excel导入文件
onImportExcel() {
    // 通过文件选择器选择文件
    debugger
    let selectedFile = event.target.files;
    if(selectedFile.length<=0)return
    // 将文件读取为二进制字符串
    let reader = new FileReader();
    reader.readAsBinaryString(selectedFile[0]);
    // 文件读取成功后
    reader.onload = () => {
        // 将文件内容解析为workbook对象
        let workbook = XLSX.read(reader.result, { type: 'binary' });
        // 获取sheet名称列表
        let sheetNames = workbook.SheetNames;
        // 获取第一个sheet名称
        let sheetName = sheetNames[0];
        // 获取第一个sheet
        let sheet = workbook.Sheets[sheetName];
        // 将sheet转换为JSON对象
        let json = XLSX.utils.sheet_to_json(sheet);
        // 打印JSON对象
        console.log(json);
    };
}

4、使用element-ui简单美化了一下页面后的代码

<template>
<!-- 选择excel文件 -->
    <input ref="upload" type="file" style="display: none;" accept=".xlsx,.xls"
        @change="onImportExcel" />
    <el-button round @click="excel_file()">选择EXCEL文件</el-button>
</template>
<script>
export default {
    methods: {
        //选择excel按钮
        excel_file() {
            this.$refs.upload.click()
        },
        //excel导入文件
        onImportExcel() {
            // 通过文件选择器选择文件
            debugger
            let selectedFile = event.target.files;
            if(selectedFile.length<=0)return
            // 将文件读取为二进制字符串
            let reader = new FileReader();
            reader.readAsBinaryString(selectedFile[0]);
            // 文件读取成功后
            reader.onload = () => {
                // 将文件内容解析为workbook对象
                let workbook = XLSX.read(reader.result, { type: 'binary' });
                // 获取sheet名称列表
                let sheetNames = workbook.SheetNames;
                // 获取第一个sheet名称
                let sheetName = sheetNames[0];
                // 获取第一个sheet
                let sheet = workbook.Sheets[sheetName];
                // 将sheet转换为JSON对象
                let json = XLSX.utils.sheet_to_json(sheet);
                // 打印JSON对象
                console.log(json);
            };
        }
    }
}
</script>