我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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);
 
      
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
 
      
      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');
  XLSX
  .writeFile(wb, 'SheetJS.xlsx');

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Java使用Apache.POI中HSSFWorkbook导出到Excel的实现方法

使用Apache.POI中HSSFWorkbook导出到Excel,具体内容如下所示: 1.引入Poi依赖(3.12) 依赖如下:org.apache.poi
2022-06-04

Java使用POI实现导出Excel的方法详解

在项目开发中往往需要使用到Excel的导入和导出,导入就是从Excel中导入到DB中,而导出就是从DB中查询数据然后使用POI写到Excel上。本文将利用POI实现导出Excel,需要的可以参考一下
2022-11-13

使用EasyExcel实现Excel的导入导出

文章目录 前言一、EasyExcel是什么?二、使用步骤1.导入依赖2.编写文件上传配置3.配置表头对应实体类4.监听器编写5.控制层6.前端代码 总结 前言 在真实的开发者场景中,经常会使用excel作为数据的载体,进行
2023-08-17

Java中用POI实现将数据导出到Excel的方法

这篇文章将为大家详细讲解有关Java中用POI实现将数据导出到Excel的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。常用的java框架有哪些1.SpringMVC,Spring Web MVC是一
2023-06-14

Asp.Net Core实现Excel导出功能的实现方法

在web应用程序开发时,或许你会遇到这样的需求,如何在 Asp.Net Core 中实现 excel 或者 word 的导入导出,在 NuGet 上有大量的工具包可以实现这样的功能,本篇就讨论下如何使用 ClosedXML 实现 Excel
2022-06-07

java实现excel的导出之使用easyExcel

前言 在我们的项目需求中,经常会遇到导出的需求,其中excel的导出最为常见。生成Excel比较有名的框架有Apache poi,jxl等,但他们都存在一个严重的问题就是非常的耗内存,如果你的系统并发量不大的话可能还行,但是一旦并发上来后一
2023-08-18

java中export方法如何实现导出excel文件

这篇文章将为大家详细讲解有关java中export方法如何实现导出excel文件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1.export函数//导出文件接口public String export(
2023-06-29

PHP结合vue导出excel出现乱码的解决方法分享

这篇文章主要为大家详细介绍了PHP结合vue导出excel出现乱码的解决方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-02-03

C#中如何使用NPOI实现Excel导入导出功能

本文小编为大家详细介绍“C#中如何使用NPOI实现Excel导入导出功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“C#中如何使用NPOI实现Excel导入导出功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧
2023-06-29

使用Python导出Excel图表以及导出为图片的方法

本篇讲下如何使用纯python代码将excel 中的图表导出为图片。这里需要使用的模块有win32com、pythoncom模块。 网上经查询有人已经写好的模块pyxlchart,具体代码如下:from win32com.client im
2022-06-04

编程热搜

目录