如何在 angular 2 中使用 SheetJS (js-xlsx)

Question

我正在学习 angular2，我想在我的项目中使用 js-xlsx 库。

我安装了 xlsx npm install xlsx 和 jszip npm install jszip 并将它们添加到我的 index.html

<script src="node_modules/xlsx/dist/xlsx.core.min.js"></script>

<script src="node_modules/jszip/dist/jszip.min.js"></script>

并添加了打字稿定义 tsd install xlsx

我正在使用 webpack

但是当我在

中使用它时

import * as xlsx from 'xlsx';

但我收到错误 module build failed: error: cannot resolve module 'xlsx'

Answer 1

更简单的方法是根本不使用类型：

像您一样将 xlsx.core.min.js 添加到您的 index.html 文件。（我正在使用 angular-cli，所以我的 js 文件被复制到 dist/vendor 目录）

<script src="vendor/xlsx/dist/xlsx.core.min.js"></script>
在您的模块中，不要使用导入，而是在您的导入块下声明 XLSX。

declare var XLSX: any;

如果您使用的是 angular-cli，则需要将 xlsx 添加到 angular-cli-build.js 文件中。

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'moment/moment.js',
       ....
      'xlsx/**/*.+(js|js.map)'
    ]})
};

Answer 2

试用ts-xlsx，简单易用
npm install --save ts-xlsx
然后安装打字
npm install --save @types/xlsx

/* You can use as namespace: */
import * as XLSX from 'ts-xlsx';
let wb: XLSX.IWorkBook = XLSX.read(...)

/* Or straight forward import */
import { read, IWorkBook } from 'ts-xlsx';
let wb: IWorkBook = read(...)

Answer 3

您可以尝试的其他方法是更改 link 以使用完整版本，而不是核心版本。以下对我有用：

<script lang="javascript" src="dist/xlsx.full.min.js"></script>

这会随着您的路径而改变。你的将是：

<script src="node_modules/xlsx/dist/xlsx.full.min.js"></script>

Answer 4

以下是一个工作组件，它使用 Angular 2/4 上的 js-xlsx 库从对象数组中导出 xlsx 文件：

import { Component, OnInit } from '@angular/core';

import { utils, write, WorkBook } from 'xlsx';

import { saveAs } from 'file-saver';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  table = [
    {
      First: 'one',
      Second: 'two',
      Third: 'three',
      Forth: 'four',
      Fifth: 'five'
    },
    {
      First: 'un',
      Second: 'deux',
      Third: 'trois',
      Forth: 'quatre',
      Fifth: 'cinq'
    },
  ];

  ngOnInit() {
    const ws_name = 'SomeSheet';
    const wb: WorkBook = { SheetNames: [], Sheets: {} };
    const ws: any = utils.json_to_sheet(this.table);
    wb.SheetNames.push(ws_name);
    wb.Sheets[ws_name] = ws;
    const wbout = write(wb, { bookType: 'xlsx', bookSST: true, type: 
'binary' });

function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i !== s.length; ++i) {
    view[i] = s.charCodeAt(i) & 0xFF;
  };
  return buf;
}

saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'exported.xlsx');
  }
}

你必须安装 xlsx 和文件保护程序才能工作。

有关从 Angular2/4 上的 json 数组导出 xlsx 文件的工作示例：

https://github.com/bogdancar/xlsx-json-to-xlsx-demo-Angular2

Answer 5

我安装了 xlsx 包，例如"npm install --save xlsx"。它使用 xlsx 作为依赖项更新了 package.json 文件。现在在我的组件中我可以导入它，例如"import * as XLSX from 'xlsx' "。我正在使用 Angular 4。我想，在 Angular 2 中它应该以完全相同的方式工作。 P.S。无需在 index.html.

中包含 javascript 文件

Answer 6

要使 xlsx 适用于 angular 2+，您不需要安装任何类型。因为 xlsx 库在包本身中包含所需的类型。

第 1 步：使用 npm 安装 xlsx

npm install xlsx

第 2 步：在 service/component.

中导入 xlsx

const XLSX = require('xlsx');

OR

import * as XLSX from 'xlsx'; -- （这对我不起作用）

第 3 步：您可以使用 XLSX，如下所示。

XLSX.utils.json_to_sheet(json);

如何在 angular 2 中使用 SheetJS (js-xlsx)

how to use SheetJS (js-xlsx) in angular 2

xlsx

angular