SheetJS js-xlsx 的使用， exceljs

js-xlsx 官方文档：https://sheetjs.gitbooks.io/docs/#sheetjs-js-xlsx

npm xlsx地址：https://www.npmjs.com/package/xlsx

首先进行安装或引入：

在浏览器中，只需添加脚本标记：
<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/xlsx-style@0.8.13@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'

暂未解决，可以参考 https://stackoverflow.com/questions/51694902/react-boilerplate-error-cant-resolve-xlsx-in-users-react-boilerplate-no

在 ads.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'

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 使用

地址： https://github.com/eligrey/FileSaver.js

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"] }}

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');
    }

posted @ 2019-12-02 15:19 秦笑阅读(26503) 评论(0) 编辑收藏举报

刷新页面返回顶部

秦笑

SheetJS js-xlsx 的使用， exceljs

公告