程序员小洛

Appearance

Excel导入导出数据 ​

今天实现一个导入和导出表格的功能。其实这个功能应该是后端做的，但是前端也要会啊，所以今天我做个功能简单的导入导出数据，纯属是想前端实现一下功能而已

测试文件：表格测试数据下载

安装两个库 ​

npm i xlsx file-saver -S
npm i xlsx file-saver -S

import { readFile } from '../../utils/xlsx'这个我另外导入了，其实不用抽出来也行的，我选择了抽

js
export const readFile = (file) => {
    return new Promise(resolve => {
      let reader = new FileReader()
      reader.readAsBinaryString(file)
      reader.onload = ev => {
        resolve(ev.target.result)
      }
    })
 }
export const readFile = (file) => {
    return new Promise(resolve => {
      let reader = new FileReader()
      reader.readAsBinaryString(file)
      reader.onload = ev => {
        resolve(ev.target.result)
      }
    })
 }

实现功能： ​

vue
<template>
    <div>
        <div style="display:flex;">
            <el-upload
                ref="uploadRef"
                class="upload-demo"
                action=""
                accept=".xls,.xlsx"
                :auto-upload="false"
                :show-file-list="false"
                :on-change="handleUploadChange"
            >
            <el-button round icon="upload" type="primary" >导入表格数据</el-button>
            </el-upload>
            <el-button round @click="handleExport" type="primary" >导出表格数据</el-button>
        </div>
       
        <div>
            <el-table
            :data="tableData"
            style="width: 100%">
                <el-table-column prop="name" label="名字" width="180"></el-table-column>
                <el-table-column prop="phone" label="手机号" width="180"></el-table-column>
                <el-table-column prop="age" label="年龄"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver';
import { readFile } from '../../utils/xlsx'
    export default {
        data() {
            return {
                tableData:[]
            }
        },
        methods: {
         //导入
         async handleUploadChange(file) {
            let dataBinary = await readFile(file.raw);
            //使用XLSX.read函数读取二进制数据，并将结果保存在workBook变量中
            //cellDates: true选项表示将单元格中的日期数据读取为日期对象
            let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
            //从工作簿中获取第一个工作表，并将其保存在workSheet变量中
            let workSheet = workBook.Sheets[workBook.SheetNames[0]]
            //使用XLSX.utils.sheet_to_json函数将工作表转换为JSON格式的数据，并将结果保存在data常量中
            const data = XLSX.utils.sheet_to_json(workSheet)
            // console.log(data)//这里已经能拿到转换后的json
            this.tableData = data.map(item=>{
                return{
                    'name':item['名字'],
                    'phone':item['手机号'],
                    'age':item['年龄']
                }
            })
        },
        //导出
        async handleExport() {
            let aoaList = [['名字','手机号','年龄']]
            await this.tableData.forEach(item=>{
                //这里手机号要加toString(),Excel自动将长数字（如手机号）识别为科学计数法的结果。当一个数字超过一定长度时，Excel会自动将其转换为科学计数法，不然就会变成1.57316+11这样的
                aoaList.push([item.name,item.phone.toString(),item.age])
            })
            let workSheet = '';
            //使用XLSX.utils.aoa_to_sheet函数将aoaList数组转换为一个工作表，并将结果保存在workSheet变量中
            await (workSheet = XLSX.utils.aoa_to_sheet(aoaList));
            //使用XLSX.utils.book_new函数创建一个新的工作簿
            let workBook = XLSX.utils.book_new();
            //使用XLSX.utils.book_append_sheet函数将workSheet工作表添加到workBook工作簿中，工作表的名称为’SheetJS’
            await XLSX.utils.book_append_sheet(workBook, workSheet, 'SheetJS');
            //使用XLSX.writeFile函数将workBook工作簿写入一个名为’output.xlsx’的Excel文件
            await XLSX.writeFile(workBook, 'output.xlsx');
        }
    }
    
}
</script>
<template>
    <div>
        <div style="display:flex;">
            <el-upload
                ref="uploadRef"
                class="upload-demo"
                action=""
                accept=".xls,.xlsx"
                :auto-upload="false"
                :show-file-list="false"
                :on-change="handleUploadChange"
            >
            <el-button round icon="upload" type="primary" >导入表格数据</el-button>
            </el-upload>
            <el-button round @click="handleExport" type="primary" >导出表格数据</el-button>
        </div>
       
        <div>
            <el-table
            :data="tableData"
            style="width: 100%">
                <el-table-column prop="name" label="名字" width="180"></el-table-column>
                <el-table-column prop="phone" label="手机号" width="180"></el-table-column>
                <el-table-column prop="age" label="年龄"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver';
import { readFile } from '../../utils/xlsx'
    export default {
        data() {
            return {
                tableData:[]
            }
        },
        methods: {
         //导入
         async handleUploadChange(file) {
            let dataBinary = await readFile(file.raw);
            //使用XLSX.read函数读取二进制数据，并将结果保存在workBook变量中
            //cellDates: true选项表示将单元格中的日期数据读取为日期对象
            let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
            //从工作簿中获取第一个工作表，并将其保存在workSheet变量中
            let workSheet = workBook.Sheets[workBook.SheetNames[0]]
            //使用XLSX.utils.sheet_to_json函数将工作表转换为JSON格式的数据，并将结果保存在data常量中
            const data = XLSX.utils.sheet_to_json(workSheet)
            // console.log(data)//这里已经能拿到转换后的json
            this.tableData = data.map(item=>{
                return{
                    'name':item['名字'],
                    'phone':item['手机号'],
                    'age':item['年龄']
                }
            })
        },
        //导出
        async handleExport() {
            let aoaList = [['名字','手机号','年龄']]
            await this.tableData.forEach(item=>{
                //这里手机号要加toString(),Excel自动将长数字（如手机号）识别为科学计数法的结果。当一个数字超过一定长度时，Excel会自动将其转换为科学计数法，不然就会变成1.57316+11这样的
                aoaList.push([item.name,item.phone.toString(),item.age])
            })
            let workSheet = '';
            //使用XLSX.utils.aoa_to_sheet函数将aoaList数组转换为一个工作表，并将结果保存在workSheet变量中
            await (workSheet = XLSX.utils.aoa_to_sheet(aoaList));
            //使用XLSX.utils.book_new函数创建一个新的工作簿
            let workBook = XLSX.utils.book_new();
            //使用XLSX.utils.book_append_sheet函数将workSheet工作表添加到workBook工作簿中，工作表的名称为’SheetJS’
            await XLSX.utils.book_append_sheet(workBook, workSheet, 'SheetJS');
            //使用XLSX.writeFile函数将workBook工作簿写入一个名为’output.xlsx’的Excel文件
            await XLSX.writeFile(workBook, 'output.xlsx');
        }
    }
    
}
</script>

结语：只是尝试一下这个功能前端怎么实现，现在实现也是功能比较简单的，如果表格数据繁杂，那也是麻烦啊，具体的可以网上找找资料

程序员小洛文档

Copyright © 2022-suntemple.cn.All right reserved