web-dev-qa-db-ja.com

SheetJS（js-xlsx）をangular 2で使用する方法

私は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>

typeScriptの定義を追加しましたtsd install xlsx

そして私はwebpackを使用しています

でも使った時

import * as xlsx from 'xlsx';

しかし、エラーが発生しますmodule build failed: error: cannot resolve module 'xlsx'

angularxlsx
5
Maged Milad

より簡単な方法は、タイピングをまったく使用しないことです。

  1. 行ったように、xlsx.core.min.jsをindex.htmlファイルに追加します。 （私はangular-cliを使用しているので、jsファイルがdist/vendorディレクトリにコピーされます）

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

  2. モジュールでは、インポートを使用せずに、インポートブロックの下で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)'
    ]})
};
5
Roy S.

以下は、Angular 2/4 ：）でjs-xlsxlibを使用してオブジェクトの配列から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

7
BogdanC

tryout 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(...)
4
shakram02

Xlsxをangular 2+で機能させるために、入力をインストールする必要はありません。xlsxライブラリには、パッケージ自体に必要な入力が含まれているためです。

ステップ1：npmを使用してxlsxをインストールする

_npm install xlsx
_

ステップ2：サービス/コンポーネントにxlsxをインポートします。

const XLSX = require('xlsx');

_OR 
_

_import * as XLSX from 'xlsx';_-（これは私にとってはうまくいきませんでした）

ステップ3：XLSXは次のように使用できます。

_XLSX.utils.json_to_sheet(json);
_
1
koolhuman

コアの代わりにフルバージョンを使用するようにリンクを変更することもできます。以下は私のために働いた：

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

これはあなたの道によって変わります。あなたは次のようになります：

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

Xlsxパッケージをインストールしました。 「npminstall--savexlsx」。依存関係としてxlsxを使用してpackage.jsonファイルを更新しました。そして今、私のコンポーネントでそれをインポートすることができます、例えば。 "import * as XLSX from'xlsx '"。私はAngular 4.を使用しています。Angular 2では、まったく同じように機能するはずです。PSにjavascriptファイルを含める必要はありません。 index.html。

0
user2052324