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
xlsx-style 报错
1. 如果引入xlsx-style的话可能会报错:
This relative module was not found:
./cptable in ./node_modules/
[email protected]@xlsx-style/dist/cpexcel.js
在\node_modules\xlsx-style\dist\cpexcel.js
var cpt = require(’./cpt’ + ‘able’); 改为 var cpt = cptable;
3. Can't resolve 'fs' in '/node_modules/xlsx-style/ods.js'
在 ads.js 改
if(typeof XLSX !== 'undefined') return XLSX.utils;
if(typeof module !== "undefined" && typeof require !== 'undefined')
return require('./' + 'xlsx').utils;
catch(e)
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'
exceljs
另一种 生成表格的插件 : https://github.com/exceljs/exceljs/blob/master/README_zh.md
npm install exceljs
// import * as Excel from 'exceljs';
// const Excel = require('exceljs');
import * as Excel from 'exceljs/dist/exceljs.min.js';
可以配合 file-saver 使用
npm install file-saver --save
此外,还可以通过以下方式安装TypeScript定义:
npm install @types/file-saver --save-dev
import * as FileSaver from 'file-saver'; // 浏览器读取本地的文件已经保存文件所需要的依赖。
如果运行时报错:
Unhandled promise rejection Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded.
If you must load one, do so before loading zone.js.) ;
解决方法:
将polyfills.ts中的“import 'zone.js/dist/zone';”移至main.ts。
如果还报错; 就把 import 'exceljs/dist/exceljs.min.js'; 加进 polyfills.ts 中
Cannot find name 'require'
解决方法:
npm install @types/node --save-dev
tsconfig.json 中添加
{ "compilerOptions": { "types": ["node"] }}
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');