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(){ }方法,点击导出按钮时执行此方法,导出文件
  exportList() {

   // json 示例

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

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

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

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

  1. 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中

    摘自:http://blog.csdn.net/mazhaojuan/article/details/8592015 通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来 ...

  2. 结合Bootbox将后台JSON数据填充Form表单

    本文介绍了如何结合Bootbox将后台JSON数据填充到Form表单中,同时也介绍了一些需要使用的知识的学习途径,并附上了参考文档地址与学习网址,对此感兴趣的伙伴可以直接访问学习.为了方便介绍,使用了 ...

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

      先看一下我要实现的功能界面:   这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好.这个页面主要实现的是授课,即给老师教授的课程分配学生.此页面实现功能的步骤已在页面 ...

  4. vue 导出JSON数据为Excel

    1. 安装三个依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev ...

  5. PHP导出大量数据到csv表

    对于做后台开发的码农来说,从excel导入数据到数据库亦或者是从数据库导出数据到excel都是很常见的操作.由于经常遇到这样的场景,也因为从数据库导出数据到表格所遇到的坑有很多,所以需要另辟途径来进行 ...

  6. 导出数据库数据到Excel表

    后台需要将用户信息数据导入到Excel表中提供给相关人员: 首先查询数据就不多说了: 导入Excel表直接亮代码(采用的是jxl的jar包提供的方法): public static File Impo ...

  7. Vue导出json数据到Excel表格

    一.安装依赖 npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二. ...

  8. 导出大量数据到excel表

    set_time_limit(0);error_reporting(0); // 输出Excel文件头,可把user.csv换成你要的文件名header('Content-Type: applicat ...

  9. 导出excel时,以form方式提交json数据

    今天在写项目时写到一个excel的导出,开始想用ajax请求后台后导出,但发现ajax会有返回值,而且ajax无法直接输出文件,而后台的excel导出方法已经封装好,不方便修改. 就改用了提交的方式f ...

随机推荐

  1. 我的第一个Angular2应用

    1需要具备的基本前端基础:HTML.CSS.JavaScript.为了实现对项目包的管理,推荐使用npm NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题:官网先下 ...

  2. lr12关联,响应乱码

    1.前程贷登录.投标脚本 Action() { //    web_url("登录页", //        "URL=http://120.78.128.25:8765 ...

  3. sqlserver数据库 视图相关

    1.首先创建一个视图 方法一:右键解决 方法二:脚本 create view view_test AS select * from t1 GO 2.删除视图 方法1:右键解决 方法2:脚本 if ex ...

  4. Python爬虫入门之正则表达式

    在前面我们已经搞定了怎样获取页面的内容,不过还差一步,这么多杂乱的代码夹杂文字我们怎样把它提取出来整理呢?下面就开始介绍一个十分强大的工具,正则表达式! 1.了解正则表达式 正则表达式是对字符串操作的 ...

  5. cocoaPods安装爬坑总结

    1.移除现有Ruby默认源 $ gem sources --remove https://rubygems.org/   2.使用新的源 $ gem sources -a https://ruby.t ...

  6. 作为新手在学习SSM+Easyui过程中遇到一系列问题

    对于初学SSM来说,如果不熟悉SSM中SpringMVC对数据处理,会造成很大的困扰, SSM中对前台页面放在WEB-INF下,对于读取外部信息,例如导入easyui的js文件.以及不能直接进行跳转. ...

  7. spring的历史和设计科学

    Spring的起源 要谈Spring的历史,就要先谈J2EE.J2EE应用程序的广泛实现是在1999年和2000年开始的,它的出现带来了诸如事务管理之类的核心中间层概念的标准化,但是在实践中并没有获得 ...

  8. 获取input标签的值

    取文本框值 AfterTiltle: $("[name='AfterTiltle']").val(), 取下拉列表值 AfterType: $("[name='After ...

  9. dede织梦系统接入熊掌号推送api,完整详细教程

    第一步:     根据熊掌号要求完成校验页面,官方文档很详细,照着弄就行了 第二步: 开始后台改造 1.进入后台文件夹dede(自己实际的文件夹),然后进入templets目录,打开body_inde ...

  10. 北大poj- 1008

    Maya Calendar Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 80956   Accepted: 24892 D ...