vue中使用js-xlsx导出excel的实现方法

 更新时间:2022年02月14日 11:24:57   作者:江湖行骗老中医  
本文主要介绍了vue中使用js-xlsx导出excel的实现方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

安装

npm install --save xlsx file-saver

在组件里面引入

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

第一种

其中#outTable是在el-table上定义的id

exportExcel() {
      var xlsxParam = { raw: true };//转换成excel时,使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);//outTable为列表id
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "sheetjs.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;}

第二种

通过数组导出excel

var _data = [
 
        [ "id",    "name", "value" ],
 
        [    1, "sheetjs",    7262 ],
 
        [    2, "js-xlsx",    6969 ]
 
      ];
      const ws= XLSX.utils.aoa_to_sheet(_data);
 
      /* generate workbook and add the worksheet */
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
 
      /* save to file */
      XLSX.writeFile(wb, 'SheetJS.xlsx');

第三种

通过json导出excel

exportExcel() {var wopts = {
        bookType: 'xlsx',
        bookSST: true,
        type: 'binary'
      };
      var workBook = {
        SheetNames: ['Sheet1'],
        Sheets: {},
        Props: {}
      };
      var table = [];
        for(var i=0;i<this.multipleSelection.length;i++){
          var params = {
            姓名: this.multipleSelection[i].name,
            部门: this.multipleSelection[i].department,
            职务名称: this.multipleSelection[i].titles,
            档案编号:this.multipleSelection[i].fileNum,
            校验状态:this.multipleSelection[i].verifyStatus,
            审核状态:this.multipleSelection[i].checkedStatus,
            备注:this.multipleSelection[i].checkedReason,
          }
          table[i] = params
      };
      //1、XLSX.utils.json_to_sheet(data) 接收一个对象数组并返回一个基于对象关键字自动生成的“标题”的工作表,默认的列顺序由使用Object.keys的字段的第一次出现确定
      //2、将数据放入对象workBook的Sheets中等待输出
      workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(table);
 
      //3、XLSX.write() 开始编写Excel表格
      //4、changeData() 将数据处理成需要输出的格式
      FileSaver.saveAs(new Blob([this.changeData(XLSX.write(workBook, wopts))], {type: 'application/octet-stream'}), "sheetjs.xlsx")
    },
     changeData(s) {
 
    //如果存在ArrayBuffer对象(es6) 最好采用该对象
    if (typeof ArrayBuffer !== 'undefined') {
 
      //1、创建一个字节长度为s.length的内存区域
      var buf = new ArrayBuffer(s.length);
 
      //2、创建一个指向buf的Unit8视图,开始于字节0,直到缓冲区的末尾
      var view = new Uint8Array(buf);
 
      //3、返回指定位置的字符的Unicode编码
      for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
      return buf;
 
    } else {
      var buf = new Array(s.length);
      for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
      return buf;
    }
  },

第三种适合导出选中的数据如果选中的json数据字段都是你需要的可以用下面的方法导出

const workSheet = XLSX.utils.json_to_sheet(this.multipleSelection, {
    header: ['列1', '列2', '列3', '列1', '列2', '列3', '列1', '列2'], skipHeader: true// 跳过上面的标题行  
  });
  const ws = XLSX.utils.aoa_to_sheet(workSheet);
  const wb = XLSX.utils.book_new();
  XLSX
  .utils.book_append_sheet(wb, ws, 'Sheet1');/* save to file */
  XLSX
  .writeFile(wb, 'SheetJS.xlsx');

到此这篇关于vue中使用js-xlsx导出excel的实现方法的文章就介绍到这了,更多相关vue js-xlsx导出excel 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解Vue 中 extend 、component 、mixins 、extends 的区别

    详解Vue 中 extend 、component 、mixins 、extends 的区别

    这篇文章主要介绍了Vue 中 extend 、component 、mixins 、extends 的区别,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-12-12
  • VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    这篇文章主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • Vue实施重新发布和软件热更新的经验分享

    Vue实施重新发布和软件热更新的经验分享

    在Web应用的开发周期中,版本管理和软件热更新是一个不可或缺的话题,随着Vue.js框架的流行,越来越多的应用程序选择使用Vue来构建前端,本文将探讨在Vue应用中实施重新发布和热更新的最佳实践,需要的朋友可以参考下
    2024-09-09
  • VueRouter 原理解读之初始化流程

    VueRouter 原理解读之初始化流程

    这篇文章主要为大家介绍了VueRouter原理解读之初始化流程实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 前端+接口请求实现vue动态路由

    前端+接口请求实现vue动态路由

    在Vue应用中,结合前端和后端接口请求实现动态路由,可根据用户权限动态生成路由,提高安全性与灵活性,本文就来介绍一下前端+接口请求实现vue动态路由,感兴趣的可以了解一下
    2024-09-09
  • Vue获取DOM元素样式和样式更改示例

    Vue获取DOM元素样式和样式更改示例

    本篇文章主要介绍了Vue获取DOM元素样式和样式更改示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • vue项目base64字符串转图片的实现代码

    vue项目base64字符串转图片的实现代码

    这篇文章主要介绍了vue项目base64字符串转图片的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • Vue之读取并解析ini文件中的内容

    Vue之读取并解析ini文件中的内容

    这篇文章主要介绍了Vue之读取并解析ini文件中的内容,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue组件设计-滚动置顶设计案例

    Vue组件设计-滚动置顶设计案例

    这篇文章主要介绍了Vue组件设计-滚动置顶设计案例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue-cli中打包图片路径错误的解决方法

    vue-cli中打包图片路径错误的解决方法

    这篇文章主要介绍了vue-cli中打包图片路径错误的解决方法 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10

最新评论