SheetJS js-xlsx 的使用, exceljs
js-xlsx 官方文档:https://sheetjs.gitbooks.io/docs/#sheetjs-js-xlsx
npm xlsx地址:https://www.npmjs.com/package/xlsx
官网:https://sheetjs.com/opensource
首先进行安装或引入:
在浏览器中,只需添加脚本标记:
<script lang="javascript" src="dist/xlsx.full.min.js"></script> 使用 npm:
$ npm install xlsx 使用bower:
$ bower install js-xlsx
import * as XLSX from 'xlsx'; // 数据导出导入所需要的依赖
以angular为例:
exportExcle() { // 使用 XLSX.utils.aoa_to_sheet(excleData);
// const excleData = [
// ['周一', '周二', '周三', '周四', '周五'],
// ['语文', '数学', '历史', '政治', '英语'],
// ['数学', '数学', '政治', '英语', '英语'],
// ['政治', '英语', '历史', '政治', '数学'],
// ]; // 使用 XLSX.utils.json_to_sheet(excleData);
const excleData = [
{周一: '语文', 周二: '数学', 周三: '历史', 周四: '政治', 周五: '英语'},
{周一: '数学', 周二: '数学', 周三: '政治', 周四: '英语', 周五: '英语'},
{周一: '政治', 周二: '英语', 周三: '历史', 周四: '政治', 周五: '数学'},
]; // 设置表格样式,!cols为列宽
const options = {
'!cols': [
{ wpx: 100 },
{ wpx: 100 },
{ wpx: 100 },
{ wpx: 100 },
{ wpx: 100 },
]};
// 制作工作表的方式有很多种,以数组和对象为例
// const worksheet: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(excleData);
const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(excleData); // 使用指定的单元格作为起点插入数据,r:行, c:列,详情看官网文档
// XLSX.utils.sheet_add_aoa(worksheet, [[“数学”,“语文”], [“政治”,“语文”], [“历史”,“政治”], ], {origin: {r: 2, c: 5}});
worksheet['!cols'] = options['!cols']; // 新建一个工作簿
const workbook: XLSX.WorkBook = XLSX.utils.book_new(); /* 将工作表添加到工作簿*/
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
/* 输出工作表, 由文件名决定的输出格式*/
XLSX.writeFile(workbook, '排庭表.xlsx');
}
js-xlsx 只能设置,行宽等简单的颜色, 设置背景色,自动换行等样式(也就是cell.s 这个属性)暂不支持, 他的pro版收费, 但是支持多种样式设置;
设置样式可以使用 xlsx-style : https://github.com/protobi/js-xlsx/tree/beta#readme
This relative module was not found:
./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js
在\node_modules\xlsx-style\dist\cpexcel.js
if(typeof XLSX !== 'undefined') return XLSX.utils;
if(typeof module !== "undefined" && typeof require !== 'undefined')
{
try
{
return require('./' + 'xlsx').utils;
}
catch(e)
{
try
{
return require('./' + 'xlsx').utils;
}
catch(ee)
{
return require('./xlsx').utils;
}
}
throw new Error("Cannot find XLSX utils");
};
2. Can't resolve '../xlsx' in '/node_modules/xlsx-style'
另一种 生成表格的插件 : https://github.com/exceljs/exceljs/blob/master/README_zh.md
安装:
npm install exceljs
导入 :
npm install @types/node --save-dev
tsconfig.json 中添加
{ "compilerOptions": { "types": ["node"] }}
demo
exportExcle() { const excleData = [
['周一', '周二'],
['语文', '数学'],
['数学', '英语'],
];
const workbook = new Excel.Workbook();
const sheet = workbook.addWorksheet('Sheet1');
sheet.addRows(excleData);
sheet.eachRow((row, rowNumber) => {
row.eachCell((cell, colNumber) => {
// 对齐样式
if (rowNumber === 1 || colNumber === 1) {
cell.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true };
} else {
cell.alignment = { vertical: 'top', horizontal: 'left', wrapText: true };
}
// 边框
cell.border = {
top: { style: 'thin' },
left: { style: 'thin' },
bottom: { style: 'thin' },
right: { style: 'thin' },
};
// 设置列宽
sheet.getColumn(colNumber).width = 25;
// sheet.getColumn(colNumber).width = 25;
});
});
sheet.getRow(1).height = 30;
workbook.xlsx.writeBuffer()
.then((buffer) => {
// done
this.saveAsExcelFile(buffer, '课表');
});
}
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 + '.xlsx');
}
SheetJS js-xlsx 的使用, exceljs的更多相关文章
- 在浏览器上打开、预览Excel xlsx表格文件
现在的HTML5,有了FileReader文件读写API, 真是让javascript的能力大幅提升. 解析zip压缩文件.解析Excel xlsx 表格文档各种文件预览,实现起来也有了可能性,以前的 ...
- node.js、js读取excel、操作excel、创建excel之js-xlsx.js
node.js篇 第一步引入包 npm install xlsx -save 第二步使用 var xl =require('xlsx'); //workbook 对象,指的是整份 Excel 文档.我 ...
- 一次vue-cli 2.x项目打包优化经历(优化xlsx插件)
一.分析各模块打包后大小 用vue-cli创建的项目,已经集成 webpack-bundle-analyzer.详见文件 build/webpack.prod.conf.js,代码如下: if (co ...
- 十七 bootstrap-table tableExport 导出xlsx格式表格
原文:十七 bootstrap-table tableExport 导出xlsx格式表格 在[十六.bootstrap-table javascript导出数据]中,打开导出的表格时,总会弹出一个提示 ...
- [SheetJS] js-xlsx模块学习指南
简介 SheetJS是前端操作Excel以及类似的二维表的最佳选择之一,而js-xlsx是它的社区版本. js-xlsx将注意力集中到了数据转换和导出上,所以它支持相当多种类的数据解析和导出.不仅仅局 ...
- PHP配合JS导出Excel大量数据
一般使用PHP导出Excel表格都会用PHPExcel,但是当遇到要导出大量数据时,就会导致超时,内存溢出等问题.因此在项目中放弃使用这种方式,决定采用前段生成Excel的方式来解决问题. 步骤如下: ...
- js 解析本地Excel文件!
通常,一般读取Excel都是由后台来处理,不过如果需求要前台来处理,也是可以的.. 1.需要用到js-xlsx,下载地址:js-xlsx 2.demo: <!DOCTYPE html>&l ...
- xlsx导入成--json
这两天遇到大难题了,就是这个 xlsx 导入问题,之前用的xlsx.full.min.js,写的导入,结果不兼容ie浏览器,研究这个也好长时间,网上居然还没有搜到合适的,自己写从xlsx官网上 ...
- xlsx 库 知识点
官方github地址:https://github.com/SheetJS/js-xlsx xlsx 用webpack打包后体积太大: vue-cli构建的项目,优化办法:https://segmen ...
随机推荐
- conda退出base 环境
安装conda后取消命令行前出现的base,取消每次启动自动激活conda的基础环境 方法一: 每次在命令行通过conda deactivate退出base环境回到系统自动的环境 方法二 1,通过 ...
- fetch 写法
fetch("../students.json").then(function(response){ if(response.status!==200){ console.log( ...
- jmeter csv Data Set Config 文件中带引号的数据转换问题(自动添加双引号解决办法)
1.我们从csv中获取数据,在jmeter中使用这些数据,其中csv的数据如图,有的数据包含引号. 2.问题:我们获取的json数据,被自动添加了双引号 3.解决方式: 在CSV Data Set C ...
- sublime text 3插件---File Header配置
今天趁着有点闲工夫,准备好好配置一下sublime环境,毕竟天天见面. 首当其冲的就是FileHeader插件了,安装它之后就懒得配置过.(方便起见,以下简称FH) FH是一个为文件自动添加前缀字段的 ...
- Excel导入导出工具(简单、好用且轻量级的海量Excel文件导入导出解决方案.)
Excel导入导出工具(简单.好用且轻量级的海量Excel文件导入导出解决方案.) 置顶 2019-09-07 16:47:10 $9420 阅读数 261更多 分类专栏: java 版权声明:本 ...
- 使用oracle数据库的开发流程
- 190707Python-MySQL
一.Python连接MySQL import pymysql conn = pymysql.connect(host='192.168.100.4', port=3306, user='dongfei ...
- leetcode-easy-dynamic-121 Best Time to Buy and Sell Stock
mycode 70.94% 思路:其实没必要去考虑在计算了一个max-min后,后面又出现了一个新的的最小值的情况,因为res取值就是取自己和新的res的最大值 在遇见max值之前,遇见新的最小值, ...
- 下载excle文件之工具
创建万能的工具类,已备用 ExcelData.java 存放文件数据 package com.ulic.gis.dataCenter.util; import java.io.Serializable ...
- 浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象
ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象 1.返回顶部 1. HTML DOM Document 对象 Docume ...