vue[前端js操作进行excel导入导出的插件收集与使用]

最近在一个项目中遇到了要前端来对表格数据进行导入和导出相关的操作。然后第一印象就是要到网上找个比较靠谱而且使用多的npm插件来用用。找了许久,发现了几款不错的插件以及一些原生的方式,现在记录下来。

关于js原生导出功能

在常规的开发中我们一旦遇到相关的功能实现首先第一个印象就是去找个对应的插件来实现这个功能,但这样往往会让我们失去了解这个功能原理的机会,因此如果有必要还是可以去了解了解相关的原生实现方式。这里推荐几篇文章。
1、https://blog.youkuaiyun.com/hhzzcc_/article/details/80419396
2、https://blog.youkuaiyun.com/aa122273328/article/details/50388673
3、https://www.cnblogs.com/SRH151219/p/11076290.html

推荐插件

第一款

exceljshttps://github.com/exceljs/exceljs

这款插件通常用于后端基于nodeJs开发的服务上,其内容也更适用后台,网上找的文章基本都是后台相关的使用方式。但是通常来讲这种npm能在nodejs中使用在前端也应该能使用的,但我觉得这个插件在前端使用起来麻烦,因此不去详细了解了,仅找了几篇使用文章了解了下。如果有需要可以去git上查看中文文档使用。
1、https://www.jianshu.com/p/0f6a338c54f4
2、https://blog.youkuaiyun.com/m0_38060839/article/details/86469404

第二款

vue-json-excelhttps://github.com/jecovier/vue-json-excel

这款看名字就知道是以vue的语法写的,但是其知名度以及相关的接口说明不是特别的友好,但是参考网上的网友门的文档倒是非常的不错。如果内容比较简单,可以尝试使用这个
1、https://blog.youkuaiyun.com/qq_42313028/article/details/103069876
2、https://www.cnblogs.com/gggggggxin/p/11982436.html
3、https://blog.youkuaiyun.com/weixin_44990295/article/details/109633036

第三款(推荐)

sheetjs(又叫xlsx或者jsxlsx):https://github.com/SheetJS/sheetjs
这款是比较常用的前端导入导出插件,也是一款比较成熟的插件,有好几种版本,但是其普通的免费版本就已经足够前端使用了。(虽然文档是英文的)
首先来个优秀的使用文章。
https://www.cnblogs.com/liuxianan/p/js-excel.html
文章讲述的功能基本满足前端导入导出功能所需了,但如果需要更复杂的功能,可以尝试去git上找找相关api内容,然后拿过来使用。
参考阅读文章:
1、https://blog.youkuaiyun.com/tian_i/article/details/84327329
2、https://www.jianshu.com/p/c41730e48c31

补充:
1、xlsx的引用
npm 之后在node_modules中找到xlsx文件并在dist文件中找到xlsx.full.min.js然后复制出来放在public中,并且在index.html中使用script引用
在这里插入图片描述

2、三个方法的代码以及json_to_sheet的使用,即[{a:x1},{a:x2}]这种数据格式的导出方式

在这里插入图片描述

 handleExport() {
 	  // saveCheckList就是一个需要导出的数据的数组对象类似于[{a:x1},{a:x2}]
      // 导出的内容,即第二行开始的所有数据
      let aoa = this.saveCheckList.map((item) => {
        return {
          产品编号: item.ebIds,
          产品名称: item.ebName,
          产品型号: item.ebModelName,
          批次: item.ebBatch,
          配置传感器: item.ebmSensor,
          是否激活: item.ebActivated,
          是否过期: item.ebValid
        };
      });
      // 导出的标题,即第一行数据
      let aoaHeader = [
        "产品编号",
        "产品名称",
        "产品型号",
        "批次",
        "配置传感器",
        "是否激活",
        "是否过期",
      ];
      // index.html引入了文件XLSX就能找到,更多接口查看官方文档
      var sheet = XLSX.utils.json_to_sheet(aoa, { header: aoaHeader });
      this.openDownloadDialog(this.sheet2blob(sheet), "应急包数据.xlsx");
    },

在这里插入图片描述

 /**
     * 通用的打开下载对话框方法,没有测试过具体兼容性
     * @param url 下载地址,也可以是一个blob对象,必选
     * @param saveName 保存文件名,可选
     */
    openDownloadDialog(url, saveName) {
      if (typeof url == "object" && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
      }
      var aLink = document.createElement("a");
      aLink.href = url;
      aLink.download = saveName || ""; // HTML5新增的属性,指定保存文件名,可以不要后缀,注意,file:///模式下不会生效
      var event;
      if (window.MouseEvent) event = new MouseEvent("click");
      else {
        event = document.createEvent("MouseEvents");
        event.initMouseEvent(
          "click",
          true,
          false,
          window,
          0,
          0,
          0,
          0,
          0,
          false,
          false,
          false,
          false,
          0,
          null
        );
      }
      aLink.dispatchEvent(event);
    },

在这里插入图片描述

 // 将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载
    sheet2blob(sheet, sheetName) {
      sheetName = sheetName || "sheet1";
      var workbook = {
        SheetNames: [sheetName],
        Sheets: {},
      };
      workbook.Sheets[sheetName] = sheet;
      // 生成excel的配置项
      var wopts = {
        bookType: "xlsx", // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
        type: "binary",
      };
      var wbout = XLSX.write(workbook, wopts);
      var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
      // 字符串转ArrayBuffer
      function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
        return buf;
      }
      return blob;
    },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值