码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 使用Export2Excel导出excel、使用xlsx导入excel

时间:2021-04-24 11:46:35      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:格式   cat   form   复制   obj   blog   读取   document   import   

 

 

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

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

 

Vue 使用Export2Excel导出excel、使用xlsx导入excel

标签:格式   cat   form   复制   obj   blog   读取   document   import   

原文地址:https://www.cnblogs.com/yeminglong/p/14693063.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!