zoukankan      html  css  js  c++  java
  • Vue 使用Export2Excel导出excel、使用xlsx导入excel

     

     

    导出参考这个开源项目地址:

    https://panjiachen.github.io/vue-element-admin/#/excel/export-merge-header

    导出excel

    • 安装依赖
      npm install -S file-saver
      npm install -S xlsx
      npm install -D script-loader

    下载 Export2Excel.js 文件
    这个文件没在npm上找到,所以在网上找的文件放入项目中。

    (复制demo中的Export2Excel.js代码保存到项目static文件夹下,可根据自己的习惯保存路径)

    • 项目中使用
    1. 引入 export_json_to_excel 方法 (使用相对路径)
      import {export_json_to_excel} from '@/vendor/Export2Excel'
    2. 格式化表格数据
      export_json_to_excel 方法中需要用到的数据和我们在网页中渲染到table上的数据不同,需要格式化


    导入excel

    • 安装依赖
      npm install -S xlsx
    • html
    <label for="import">导入</label>
    <input
        type="file"
        id="import"
        @change="handleImport"
        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
        application/vnd.ms-excel"
    />
    import XLSX from "xlsx";
    /**
     *  导入excel的input的change 函数
     *  @event 事件对象
     */
    handleImport(event) {
        // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容
        let fileReader = new FileReader();
        var file = event.currentTarget.files[0];
        // 回调函数
        fileReader.onload = ev => {
            try {
                let data = ev.target.result;
                let workbook = XLSX.read(data, {
                    type: "binary"
                });
                // excel读取出的数据
                let excelData= XLSX.utils.sheet_to_json(
                    workbook.Sheets[workbook.SheetNames[0]]
                );
                // 将上面数据转换成 table需要的数据
                let arr = [];
                excelData.forEach(item => {
                    let obj = {};
                    obj.date = item["日期"];
                    obj.name = item["姓名"];
                    obj.province = item["省份"];
                    obj.city = item["市区"];
                    obj.address = item["地址"];
                    obj.zip = item["邮编"];
                    arr.push(obj);
                });
                this.tableData = [...arr];
            } catch (e) {
                window.alert("文件类型不正确!");
                return false;
            }
        };
        // 读取文件 成功后执行上面的回调函数
        fileReader.readAsBinaryString(file);
    }
    本文参考:https://www.jianshu.com/p/23a1391e63d9

    如果这篇文章对您有帮助,您可以打赏我

    技术交流QQ群:15129679

  • 相关阅读:
    POJ 2503 Babelfish
    POJ 1182 食物链
    POJ 2352 Stars
    POJ 2528 Mayor's posters
    POJ 1328 Radar Installation
    POJ 1017 Packets
    jQuery实现登录提示
    【1-5】jQuery对象和DOM对象
    【1-4】jQuery代码风格-导航栏
    【3】买苹果
  • 原文地址:https://www.cnblogs.com/yeminglong/p/14693063.html
Copyright © 2011-2022 走看看