如何用vue实现excel表格内容的导入导出啊？

2020-03-30 10:43发布

站内问答 / Web前端
3072 5 5
发送
5条回答
小猪仔
2楼 · 2020-10-15 09:24

exportOpera(res, fileName, flag) {

const self = this;

let content;

let blob;

if (Object.prototype.toString.call(res) === "[object Function]") {

content = res();

const fr = new FileReader();

blob = new Blob([content]);

fr.readAsText(blob);

fr.onload = function (e) {

const responseJSON = JSON.parse(e.target.result);

self.exportSwitch(responseJSON.resultCode, flag);

};

} else {

content = res;

blob = new Blob([content]);

if ("download" in document.createElement("a")) {

// 非IE下载

const elink = document.createElement("a");

elink.download = fileName;

elink.style.display = "none";

elink.href = URL.createObjectURL(blob);

document.body.appendChild(elink);

elink.click();

URL.revokeObjectURL(elink.href); // 释放URL 对象

document.body.removeChild(elink);

} else {

// IE10+下载

navigator.msSaveBlob(blob, fileName);

}

}

},

exportSwitch(resultCode, flag) {

if (flag === "exportLogData") {

resultCode === 10001 ?

this.alertNotify(false, {

text: "下载",

message: "系统异常"

}) :

this.redirectLogin();

}

},

redirectLogin() {

removeLocalStorage("smoke_session_token");

this.resetState();

this.$router.replace({

path: "/login",

query: {

redirect: this.$router.currentRoute.fullPath

}

});

this.$message.error("登录已失效，请重新登录！");

if (window.stompClient) {

window.stompClient.disconnect();

delete window.stompClient;

}

},


爱梦 - 拿来吧你
3楼 · 2021-09-15 09:42

第一步：需要安装三个依赖

npm install -S file-saver xlsx (这里其实安装了2个依赖)

npm install -D script-loader

第二步：在main.js文件中全局导入挂载xlsx插件

// 导入excel插件

import XLSX from 'xlsx'

Vue.prototype.XLSX = XLSX

第三步：在src目录新建一个文件夹(名字随意)，在这个文件夹里面放入2个JS文件分别是：Blob.js和Export2Excel.js，网上可百度下载。



第四步，需要的页面的template标签中开始写代码



   批量导入


第五步：然后在 methods: {}中配置方法，代码如下：

1 // ----------以下为导入Excel数据功能--------------
 2     // 文件选择回调 
 3     onChange(file, fileList) { 
 4       console.log(fileList); 
 5       this.fileData = file; // 保存当前选择文件 
 6       this.readExcel(); // 调用读取数据的方法 
 7     }, 
 8     // 读取数据 
 9     readExcel(e) {
 10       console.log(e);
 11       let that = this;
 12       const files = that.fileData;
 13       console.log(files);
 14       if (!files) {
 15         //如果没有文件
 16         return false;
 17       } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
 18         this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
 19         return false;
 20       }
 21       const fileReader = new FileReader();
 22       fileReader.onload = ev => {
 23         try {
 24           const data = ev.target.result;
 25           // console.log(data)
 26           const workbook = this.XLSX.read(data, {
 27             type: "binary"
 28           });
 29           console.log(workbook.SheetNames);
 30           if (workbook.SheetNames.length >= 1) {
 31             this.$message({
 32               message: "导入数据表格成功",
 33               showClose: true,
 34               type: "success"
 35             });
 36           }
 37           const wsname = workbook.SheetNames[0]; //取第一张表
 38           const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
 39           console.log(ws);
 40           that.outputs = []; //清空接收数据
 41           for (var i = 0; i < ws.length; i++) {
 42             var sheetData = {
 43               // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
 44               id: ws[i]["id"],
 45               stuNumber: ws[i]["学号"],
 46               stuName: ws[i]["姓名"],
 47               sex: ws[i]["性别"],
 48               tel: ws[i]["电话"],
 49               xueyuan: ws[i]["学院"],
 50               banji: ws[i]["班级"],
 51               lyNumber: ws[i]["楼宇号"],
 52               sushe: ws[i]["宿舍号"]
 53             };
 54             that.studentlist.unshift(sheetData);
 55           }
 56           this.$refs.upload.value = "";
 57         } catch (e) {
 58           return false;
 59         }
 60       };
 61       // 如果为原生 input 则应是 files[0]
 62       fileReader.readAsBinaryString(files.raw);
 63     },

此时导入的功能就结束了，下面开始实现导出的功能

第一步，在template标签中写入导出的按钮，并绑定单击事件，代码如下：

批量导出

第二步：在methods{}方法中写对应的方法

 1 // ----------以下为导出Excel数据功能-------------- 
 2     exportToExcel() { 
 3       //excel数据导出 
 4       require.ensure([], () => { 
 5         const { export_json_to_excel } = require("../../excel/Export2Excel"); 
 6         const tHeader = [ 
 7           "id", 
 8           "学号", 
 9           "姓名",
 10           "性别",
 11           "联系电话",
 12           "宿舍号",
 13           "学院",
 14           "班级",
 15           "楼宇号"
 16         ];
 17         const filterVal = [
 18           "id",
 19           "stuNumber",
 20           "stuName",
 21           "sex",
 22           "tel",
 23           "sushe",
 24           "xueyuan",
 25           "banji",
 26           "lyNumber"
 27         ];
 28         const list = this.studentlist;
 29         const data = this.formatJson(filterVal, list);
 30         export_json_to_excel(tHeader, data, "学生列表excel");
 31       });
 32     },
 33     formatJson(filterVal, jsonData) {
 34       return jsonData.map(v => filterVal.map(j => v[j]));
 35     },


汽水味的小盆友
4楼 · 2021-09-15 13:50

首先安装：

npm install vue-json-excel//表格导出

npm install vue-xlsx-table//表格导入


在vue的main.js文件中加入全局配置

//导入表格

import vueXlsxTable from 'vue-xlsx-table'

Vue.use(vueXlsxTable, {rABS: false})

//导出表格

import JsonExcel from 'vue-json-excel'

Vue.component('downloadExcel', JsonExcel)


主要代码如下


核心导出代码如下


    class = "export-excel-wrapper"

    :data = "list"

    :fields = "json_fields"

    name = "filename.xls">

   

   


核心导入代码如下

导入EXCEL

相关的函数如下

export default {

  data() {

    return {

      list: [], //表格数据来源

      json_fields: {

        货号: "GoodNo",

        英文名称: "Enname",

        中文名称: "Cnname",

        Rcv: "Rcvs",

        数量: "Nums",

        托数: "Tnums",

        合同哈: "Contract",

        R_Cty: "RCty",

        计划发货日期: "PlanDate",

        实际发货日期: "RealDate",

        Shp_Id: "ShpId"

      },

      json_meta: [

        [

          {

            key: "charset",

            value: "utf-8"

          }

        ]

      ],

      total: 0, // 总记录数

      currentPage: 1, // 当前页码

      pageSize: 10, // 每页显示10条数据

      searchMap: {

        // 条件查询绑定的条件值

        Contract: "",

        PlanDate: ""

      },

      multipleSelection:{}//表格多选数据

    };

  },


  created() {

    // 初始化获取列表数据

    this.fetchData();

  },


  methods: {

    //表格导入功能实现

    handleSelectedFile(convertedData) {

      let data = convertedData.body;

      this.excelList = [];

      data.forEach(item => {

        let dataitem = {

          GoodNo: item.货号,

          Enname: item.英文名称,

          Cnname: item.中文名称,

          Rcvs: item.Rcv,

          Nums: item.数量,

          Tnums: item.托数,

          Contract: item.合同哈,

          RCty: item.R_Cty,

          PlanDate: item.计划发货日期,

          RealDate: item.实际发货日期,

          ShpId: item.Shp_Id

        };

        this.excelList.push(dataitem);

      });

      console.log(this.excelList);

      //this.excelList = JSON.stringify(this.excelList);

      salesApi.orderexpolexcel(this.excelList).then(res => {

        //这是我自己封装过的axios请求，按自己的发送请求就行了

        if (res.data.result == true) {

          this.$message({

            message: res.data.message,

            type: "success"

          });

          this.fetchData();

          //我这里是在保存成功后请求了一遍列表接口，用来刷新列表

        } else {

          this.$message({

            message: res.message,

            type: "error"

          });

        }

      });

    },

  }

超甜的布丁
5楼 · 2021-09-15 15:38

一、安装 vue-json-excel 依赖

npm install vue-json-excel

二、初始化 vue-json-excel

import Vue from 'vue'

import JsonExcel from 'vue-json-excel'

Vue.component('downloadExcel', JsonExcel)

三、准备数据

在这里，我们需要准备两个数据：

表头名称：json_fields

表格数据：json_data

1、表头数据

json_fields: {

'Complete name': 'name',

'City': 'city',

'Telephone': 'phone.mobile',

'Telephone 2' : {

field: 'phone.landline',

callback: (value) => {

return `Landline Phone - ${value}`;

}

},

}

表头数据由一个 JSON OBJECT 组成，其中：

key：表头名称

value：对应数据名称(看不明白?不要急，继续往下看)

2、表格数据

json_fields: {

'Complete name': 'name',

'City': 'city',

'Telephone': 'phone.mobile',

'Telephone 2' : {

field: 'phone.landline',

callback: (value) => {

return `Landline Phone - ${value}`;

}

},

},

json_data: [

{

'name': 'Tony Peña',

'city': 'New York',

'country': 'United States',

'birthdate': '1978-03-15',

'phone': {

'mobile': '1-541-754-3010',

'landline': '(541) 754-3010'

}

},

{

'name': 'Thessaloniki',

'city': 'Athens',

'country': 'Greece',

'birthdate': '1987-11-23',

'phone': {

'mobile': '+1 855 275 5071',

'landline': '(2741) 2621-244'

}

}

],

表格数据，由一个 JSON ARRAY 组成，其每一个 ITEM 又由一个 JSON OBJECT 组成，其中：

key：对应数据名称(看明白对应关系了吧)

value：数据

好了，现在我们可以先去准备下我们的数据，为稍后我们即将要做的导出作准备

四、准备导出

class = "btn btn-default"

:data = "json_data"

:fields = "json_fields"

worksheet = "My Worksheet"

type = "csv"

name = "filename.xls">

Download Excel (you can customize this with html code!)

运行项目，点击后即可导出一个 .csv 文件


饕餮少女
6楼 · 2021-09-17 11:22

一、如何导入

1.文件选择，限制为 .xls, .xlsx 文件，获取相关文件数据；
2.默认取的是导入表格文件的第一张 工作表；

3.根据表头的文字，去匹配相对应的字段，并添加到table中 (当然，你导入的表格格式要和你的表格格式对应呢 ～～)；


for (var i = 0; i < ws.length; i++) {
            var sheetData = {
              // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
              //此处的字段名对应 上面表格数据的字段名
              age: ws[i]["年龄"],
              name: ws[i]["姓名"]
            };
            that.outputs.push(sheetData);
   }

二、如何导出


相关问题推荐

  • 现在的web开发的要求高吗？2020-11-01 21:57
    回答 120

    相对前几年来说，要高上不少了，毕竟入行的人也是越来越多了，基础的工作对应想要参与的人群基数越来越大，但是对于高端人才的需求还是很多，人才还是相对稀缺性的。所以，想要学web或者其他技术也一样，别等，别观望。web前端就业方向特别多包括web前端开发...

  • 相对定位和绝对定位的区别是什么呢2021-04-09 11:10
    回答 25

    相对定位和绝对定位是定位的两种表现形式，区别如下：一、主体不同1、相对定位：是设置为相对定位的元素框会偏移某个距离。2、绝对定位：absolute 脱离文档流，通过 top,bottom,left,right 定位。二、特点不同1、相对定位：在使用相对定位时，无论是否进行移...

  • 抓包是什么意思？2020-04-01 17:36
    回答 7
    已采纳

    抓包（packet capture）就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，也用来检查网络安全。抓包也经常被用来进行数据截取等。抓包可以通过抓包工具来查看网络数据包内容。通过对抓获的数据包进行分析，可以得到有用的信息。目前流行的...

  • 前端常用的框架有哪些？2020-11-27 10:54
    回答 89

    常用的前端框架有Bootstrap框架、React框架、Vue框架、Angular框架、Foundation框架等等

  • 前端自学的效果怎么样2020-11-19 13:46
    回答 65
    已采纳

    前端是目的就业前景非常不错的一个计算机技术，但是自学的话还是有一定难度的，网络上自学是碎片化的，同时互联网技术跟新换代快，自己的话比较吃力也学习不到最新的技术。

  • SSR 是什么意思？2020-03-20 18:56
    回答 6

    SSR就是一台服务器，可以利用 SSR 在远程的服务器上配置 SSR，使其能够成为 SSR 节点，这样本地电脑或者其它设备利用 SSR 节点实现 VPN 或者远程上网及游戏加速等方面。ShadowsocksR（简称 SSR）是 Shadowsocks 分支，在 Shadowsocks 的基础上增加了一些数据...

  • 现在计算机培训都有什么课程？2020-10-31 14:36
    回答 52
    已采纳

    计算机培训方向比较多，建议找适合自己的方向选择培训编程类：JAVA、WEB、Python、C/C++、C#等测试类：软件测试运维类：云计算、网络安全设计类：UI设计、3D建模等

  • echarts 图表类型设置为time 时 ，设置2021-01-07 11:14
    回答 11

    1、代码判断xAxis: {type: &#39;time&#39;,splitLine: {show: false},interval: 3600, // 设置x轴时间间隔axisLabel: {formatter: function(value, index) {return liangTools.unix2hm(value)}}},首先要把xAxis 显示类型设置成time，然后设置对应X轴......

  • 移动跨平台开发框架有哪些HTML5移动框架 2022-04-01 18:57
    回答 8

    HTML5 + CSS + JavaScript 开发 跨平台重用代码 

  • miniMobile移动端框架有什么特点HTML5移动框架 2022-04-01 18:57
    回答 4

    采用rem单位自动响应,并提供独有栅格化系统快速定义宽高、边距节省css代码量,同时总结各大型移动端网页,提供一套ui颜色搭配规范,尺寸规范,字体规范等。

  • 求推荐界面比较漂亮的移动开发框架HTML5移动框架 2022-03-15 16:12
    回答 10

    iView UI、ioni、SUI

  • 移动端开发用什么JS框架好HTML5移动框架 2022-03-11 18:19
    回答 6

     jQTouch 

  • 现在移动端开发都用的什么框架HTML5移动框架 2022-03-11 18:19
    回答 4

    如果只是普通的移动端用vue react 或者dva 如果是要编译成小程序什么的或者混生 就用uni-app（对应vue语法）taro（对应react） 或者纯原生 这个没有限制的，自己怎么舒服怎么来

  • 为什么说atom和sublime都是前端开发者用的HTML编辑器 2022-01-06 15:12
    回答 4

    因为可以运用在网页和小程序的开饭中，而且开源，用着便宜，企业都很喜欢

  • 前端开发用的文本编辑器有哪些？HTML编辑器 2022-01-06 15:10
    回答 10

    一、Visual Studio Code下载地址：https://code.visualstudio.com/微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。Visual Stud...

  • 如何循环淡入淡出图片css样式 2021-12-08 11:25
    回答 9

    jQuery自带淡入淡出效果 https://www.w3school.com.cn/jquery/jquery_fade.asp 看看这个 

没有解决我的问题，去提问