前端实现Excel表格导入导出

实现 Excel导入数据 和 数据导出 Excel， 常见的方法是使用 xlsx 这个npm库

导出

使用 js-xlsx 实现

下载：npm install xlsx

具体代码

<template>
    <H3>表单导入导出</H3>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
        </el-table>
    </div>
    <el-button type="primary" @click="exportFile">导出</el-button>
    <el-button type="primary">导入</el-button>
</template>

<script setup>
import { ref } from 'vue'
import * as XLSX from 'xlsx';
const tableData = ref(
    [
        {
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-02',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-04',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
    ]
)
const tableHeader = '客户表'
const exportFile = () => {
    const wb = XLSX.utils.book_new(); // 创建新的工作簿
    const ws = XLSX.utils.json_to_sheet(tableData.value); // 将表格数据转换为工作表
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); // 将工作表添加到工作簿
    XLSX.writeFile(wb, `${tableHeader}.${'xlsx'}`); // 写入文件并触发下载
}
</script>

<style lang="scss" scoped></style>

导入

FileReader 对象异步读取文件内容，使用 File 或 Blob对象指定要读取的文件或数据。

其中 File对象可以是来自用户在 元素上选择文件后返回的 FileList对象。

<template>
    <H3>表单导入导出</H3>
    <div class="upload">
        <el-upload class="upload-demo" action :before-upload="beforeUpload" :show-file-list="false">
            <el-button type="primary">导入</el-button>
        </el-upload>
        <el-dialog v-model="dialogTableVisible" :title="title" width="800" destroy-on-close>
            <el-table :data="gridData">
                <el-table-column v-for="(item, index) in tableHeaders" :key="index" :property="item" :label="item"
                    width="150" />
            </el-table>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import * as XLSX from 'xlsx';
const dialogTableVisible = ref(false)
const gridData = ref([])
const tableHeaders = ref([])
// 导入
// beforeUpload 文件上传前触发的事件
const beforeUpload = (file) => {
    console.log(file);
    const fileName = file.name
    // 截取文件名
    title.value = fileName.substring(0, fileName.lastIndexOf("."))
    const reader = new FileReader()
    // 读取 Blob或 File 的内容，并触发 onload事件
    reader.readAsArrayBuffer(file)
    // 读取成功完成时调用
    reader.onload = e => {
        // 读取的结果
        const data = e.target.result
        // 读取表格对象
        const workbook = XLSX.read(data, { type: 'binary' })
        // 找到第一张表
        const firstSheetName = workbook.SheetNames[0]
        // 读取内容
        const worksheet = workbook.Sheets[firstSheetName]
        // 将读取的内容转换为数组
        const jsonData = XLSX.utils.sheet_to_json(worksheet)
        tableHeaders.value = Object.keys(jsonData[0])
        gridData.value = jsonData
    }
    dialogTableVisible.value = true
}
</script>