angular6 导出json数据到excal表

1 首先使用npm下载插件依赖的安装包

npm install file-saver --save

npm install xlsx --save

2 引入项目中的ts文件中

import * as FileSaver from ‘file-saver‘;

import * as XLSX from ‘xlsx‘;

3  写一个exportList(){ }方法,点击导出按钮时执行此方法,导出文件

 1  exportList() {

// json 示例

    let json = [{"姓名": "***", "工號": "***", "英文名": "***", "部门": "**", "性别": "1", "手机": "+861**********",

       "个人邮箱": "****@**.com"
      }];

 2     let json = this.linuxRow;
 3     //linuxRow是要导出的json数据,可以根据选择来命名
 4     const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
 5     const workbook: XLSX.WorkBook = {
 6       Sheets: { data: worksheet },
 7       SheetNames: [‘data‘]
 8     };
 9     const excelBuffer: any = XLSX.write(workbook, {
10       bookType: ‘xlsx‘,
11       type: ‘array‘
12     });
13     //这里类型如果不正确,下载出来的可能是类似xml文件的东西或者是类似二进制的东西等
14     this.saveAsExcelFile(excelBuffer, ‘linux安装详情‘);
15   }
16   private saveAsExcelFile(buffer: any, fileName: string) {
17     const data: Blob = new Blob([buffer], {
18       type:
19         ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8‘
20     });
21     FileSaver.saveAs(data, fileName + ‘_‘ + new Date().getTime() + ‘.xlsx‘);
22     // 如果写成.xls,可能不能打开下载的文件,这可能与Excel版本有关
23   }

   

原文地址:https://www.cnblogs.com/zxbky/p/10365886.html

时间: 02-12

angular6 导出json数据到excal表的相关文章

《项目经验》--通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中

  先看一下我要实现的功能界面:   这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好.这个页面主要实现的是授课,即给老师教授的课程分配学生.此页面实现功能的步骤已在页面中有所体现,这里不再赘述,此篇文章主要介绍:我是如何通过js从前台获取数据,然后通过ajax技术向后台一般处理程序传递JSON,后台又是如何获取传来的JSON,并对JSON数据转换,然后将转换后的数据写入数据库的! 介绍这些步骤实现前,先说说自己的辛酸:絮叨辛酸,是因为为了实现这个功能,我真的用了很

导出大量数据到excel表

set_time_limit(0);error_reporting(0); // 输出Excel文件头,可把user.csv换成你要的文件名header('Content-Type: application/vnd.ms-excel');header('Content-Disposition: attachment;filename="user.csv"');header('Cache-Control: max-age=0'); $fp = fopen('/tmp/export/dat

JSON1:JSON数据的操作

JSON是一个非常流行的,用于数据交换的数据格式,主要用于Web和移动应用程序中.JSON 使用键/值对(Key:Value pair)存储数据,并且表示嵌套键值对和数组两种复杂数据类型,仅仅使用逗号(引用Key)和中括号(引用数组元素),就能路由到指定的属性或成员,使用简单,功能强大.在SQL Server 2016版本中支持JSON格式,使用Unicode字符类型表示JSON数据,并能对JSON数据进行验证,查询和修改.推荐一款JSON验证和格式化的工具:json formatter. 一,

springMVC接受ajax提交表单,json数据的两种方式

作为一个初入互联网行业的小鑫鑫,在使用springMVC时发现一个好耍的东西,决定记下来,免得哪天忘了,哈哈 第一种 序列化表单,将表单数据序列化为json对象字符串 $("#submit").click(function (){ var form=$("form").serializeArray(); $.ajax({ url:"${pageContext.request.contextPath}/teacher/updateTeacher",

jquery序列化form表单使用ajax提交后处理返回的json数据

这篇文章主要介绍了jquery序列化form表单,使用ajax提交后处理返回的json数据的示例,需要的朋友可以参考下 1.返回json字符串: ** 将一个字符串输出到浏览器 */    protected void writeJson(String json) {        PrintWriter pw = null;        try {            servletResponse.setContentType("text/plain;charset=UTF-8"

服务端Json数据+js表单数据提交的 表单交互插件(base-form.js)

我们在做表单的查看.编辑里涉及两个点: 点1,提交Form表单到服务器,保存到数据库 点2,页面显示Form表单里的所有字段 如果表单的字段很多,这两个点会有两个问题: 1,提交Form时,如何少量代码.快速获取表单的所有数据? 2,页面显示Form表单时,如何自动给表单的所有字段自动赋值,而不要一个一个属性地写代码? 针对这两个问题,我有一个推荐的做法,下面以Demo举例: 1)index.html或index.jsp里写一个form表单,引入jquery.js: <srcript type=

javascript通过json数据按格式生成一个按字母分类排序的分类信息表

效果图如下 1.json数据格式 var _people=[{name:'朱瑞',url:'aaaaaa',nick:'zhu'},{name:'刘桂清',url:'aaaaa',nick:'liu'}];这里按姓氏排序借用了nick,不用nick的话,需要加载一个汉字拼音对照数组,判断匹配 2.javascript代码 1 (function ($){ 2 function SortByGroup(arr,option){ 3 this.option=option; 4 this.arr=ar

idea+springmvc+spring+mybatis+maven整合返回json数据webapi

首先看一张目录结构图: : 创建步骤: 1.创建maven  webapp工程, 创建完后的目录结构为: 2.添加项目依赖(添加jar包) 需要的jar包: spring-webmvc, spring-test, spring-orm, commons-dbcp, mybatis, mybatis-spring, mysql-connector-java, commons-fileupload, jstl,jackson-core, jackson-databind, jackson-mappe

hive加载json数据解决方案

hive官方并不支持json格式的数据加载,默认支持csv格式文件加载,如何在不依赖外部jar包的情况下实现json数据格式解析,本编博客着重介绍此问题解决方案 首先创建元数据表: create EXTERNAL table access_log (content string) row format delimited fields terminated by '\t' STORED AS INPUTFORMAT 'com.hadoop.mapred.DeprecatedLzoTextInpu

SpringMVC中出现&quot; 400 Bad Request &quot;错误(用@ResponseBody处理ajax传过来的json数据转成bean)的解决方法

最近angularjs post到后台 400一头雾水 没有任何错误. 最后发现好文,感谢作者 SpringMVC中出现" 400 Bad Request "错误(用@ResponseBody处理ajax传过来的json数据转成bean)的解决方法 今天开发过程中,在SpringMVC中的Action中处理前台ajax请求传过来的json数据直接转成对应的实体类时出错:400 Bad Request,后台也不报错,400指的的是请求无效(请求有语法问题或者不能满足请求),调试了好长时间