vue 电子表格Excel的上传导入、导出下载、读取本地Excel、json转Excel

上传导入Excel

安装插件

npm install xlsx

main.js中

//  导入excel插件
import XLSX from 'xlsx'
Vue.prototype.$XLSX = XLSX

vue页面中

<div>
        <el-upload
                action="/上传文件的接口"
                :on-change="onChange"
                :auto-upload="false"
                :show-file-list="false"
                accept=".xls, .xlsx"
        >
            <el-button size="small" type="primary" icon="el-icon-upload2">导入Excel</el-button>
        </el-upload>
        <br>
        <el-table :data="tableData" border >
            <el-table-column
                    prop="name"
                    label="姓名"
                    align="center"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="gender"
                    align="center"
                    label="性别">
            </el-table-column>
        </el-table>
    </div>

data(){
            return{
                fileData:'',
                tableData: []
            }
        },
        methods:{
            // ----------以下为导入Excel数据功能--------------
            // 文件选择回调
            onChange(file) {
                this.fileData = file; // 保存当前选择文件
                this.readExcel(); // 调用读取数据的方法
            },
            // 读取数据
            readExcel() {
                let that = this;
                const files = that.fileData;
                if (!files) {
                    return false;
                } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
                    this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
                    return false;
                }
                const fileReader = new FileReader();
                fileReader.onload = ev => {
                    try {
                        const data = ev.target.result;
                        const workbook = this.$XLSX.read(data, {
                            type: "binary"
                        });

                        if (workbook.SheetNames.length >= 1) {
                            this.$message({
                                message: "导入数据表格成功",
                                showClose: true,
                                type: "success"
                            });
                        }
                        const wsname = workbook.SheetNames[0]; //取第一张表
                        const ws = this.$XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
                        for (var i = 0; i < ws.length; i++) {
                            var sheetData = {
                                // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
                                name: ws[i]["姓名"],
                                gender: ws[i]["性别"],
                            };
                            that.tableData.push(sheetData);
                        }
                        this.$refs.upload.value = "";
                    } catch (e) {
                        return false;
                    }
                };
                // 如果为原生 input 则应是 files[0]
                fileReader.readAsBinaryString(files.raw);
            },
        }

导出下载Excel

1. 下载引入Blob.js和 Export2Excel.js
   ​​​https://pan.baidu.com/share/init?surl=Qa6Quk-dJLuYSuskK_piiw​​ 提取码：dy8m

将下载的Blob.js和 Export2Excel.js文件放在src/plugins文件夹中

2. 安装插件

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

3. vue页面中

<div>
        <el-button size="small" type="primary" icon="el-icon-download" @click="exportToExcel">导出Excel</el-button>
        <br>
        <br>
        <el-table :data="tableData" border>
            <el-table-column
                    prop="name"
                    label="姓名"
                    align="center"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="gender"
                    align="center"
                    label="性别">
            </el-table-column>
        </el-table>
    </div>

data() {
            return {
                tableData: [{"name": "张三", "gender": "男"}, {"name": "李四", "gender": "女"}]
            }
        },
        methods: {
            exportToExcel() {
                require.ensure([], () => {
                    const {export_json_to_excel} = require("@/plugins/Export2Excel");
                    // 导出后excel的表头
                    const tHeader = [
                        "姓名",
                        "性别"
                    ];
                    // 源数据对应的属性名
                    const filterVal = [
                        "name",
                        "gender"
                    ];
                    // 获取源数据
                    const list = this.tableData;
                    const data = this.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, "导出后的文件名");
                });
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]));
            },
        }

读取本地Excel

1. 将本地的Excel拷贝到项目的public文件夹中
   比如Excel文件相对于index.html文件的相对路径为 “./Excels/极度认真系统.xlsx”
2. 安装插件

npm install xlsx

3. 安装axios

npm install axios --save-dev

在 src/main.js 中导入 axios

import axios from 'axios'
Vue.prototype.$http =

4. vue页面中

import XLSX from 'xlsx'

created() {
    // Excel文件相对于index.html文件的相对路径
    let url = "./Excels/极度认真系统.xlsx"
    this.$http.get(url, {responseType: 'arraybuffer'})
        .then((res) => {
            let data = new Uint8Array(res.data)
            let wb = XLSX.read(data, {type: "array"})
            // ‘2020年日记’ 为Excel文件中的表名
            let content = wb.Sheets['2020年日记']
            this.data = XLSX.utils.sheet_to_json(content)
        })
},

假设本地表格中的内容为：

则此时 data中中的数据为

data:[
    {
        "姓名":'张三',  "性别":'男',
    },
    {
        "姓名":'李四',  "性别":'女',
    },
],

json转Excel

原理与导出下载Excel相同

1. 下载引入Blob.js和 Export2Excel.js
   ​​​https://pan.baidu.com/share/init?surl=Qa6Quk-dJLuYSuskK_piiw​​ 提取码：dy8m

将下载的Blob.js和 Export2Excel.js文件放在src/plugins文件夹中

2. 安装插件

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

3. json转Excel的函数

JSONtoExcel(JSONdata) {
                require.ensure([], () => {
                    const {export_json_to_excel} = require("@/plugins/Export2Excel");

                    // 将源数据转化为对象
                    let list = JSON.parse(JSONdata)

                    let keyList =[]

                    for (let key in list[0]) {
                        keyList.push(key)
                    }

                    // 导出后excel的表头
                    const tHeader = keyList

                    // 源数据对应的属性名
                    const filterVal = keyList

                    const data = this.formatJson(filterVal, list);
                    export_json_to_excel(tHeader, data, "导出后的文件名");
                });
            },

传入的JSONdata的格式需为对象数组，如：

[
{"name": "张三", "gender": "男"},
{"name": "李四", "gender": "女"}
]