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

本文链接：https://www.cnblogs.com/lvsk/p/11970747.html

SheetJS js-xlsx 的使用， exceljs

SheetJS js-xlsx 的使用， exceljs的更多相关文章

随机推荐

热门专题

目录导航