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. VS2017提醒找不到MSVCR110D.dll

    我的电脑时win10我已解决,不能传文件,需要联系我

  2. paramiko向服务器自动上传下载文件

    import paramikoimport os def download_from(ip,u,p): file_list=['file2',file3','file4'] file_path=&qu ...

  3. 电脑小白和ta的小白电脑——MySQL数据库

    数据库我选择了MySQL,因为据说MySQL是最流行的关系型数据库管理系统,在WEB应用方面 MySQL 是最好的RDBMS之一了,而且,免费呀! MySQL数据库开发环境的配置 (一)下载MySQL ...

  4. express3/4引入socket.io

    app.js var express = require('express'); var path = require('path'); var session = require('express- ...

  5. 关于python那些事儿

    学习总结: 1.输入一个数据 a=input. 2.在输出结果中增加字符 # 运行如下语句: print("你的名字叫{}.".format("饺子")) (以 ...

  6. Mac下部署Ionic环境

    1.下载安装nodejs,可以到官网http://nodejs.org/en/download/上去下载最新版本安装,比较无脑.如果官网打不开的话可以到中文网站去下载http://nodejs.cn/ ...

  7. position:fixed 兼容浏览器低版本

    项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代 ...

  8. java的重写

    重写是子类对父类的允许访问的方法的实现过程进行重新编写, 返回值和形参都不能改变.即外壳不变,核心重写! 重写的好处在于子类可以根据需要,定义特定于自己的行为. 也就是说子类能够根据需要实现父类的方法 ...

  9. vue 中生成二维码之爬坑之路

    最近在做vue中项目,有个需求是在你提交信息后把后台返给你的链接生成二维码. 一共使用了两种生成二维码的方法 1.vue-qr 这个是在一进入页面直接生成二维码,具体介绍见文档:https://www ...

  10. 在线jquery.min.js、vue.min.js引用

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js ...