可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
I'm learning angular2 and i wanted to use js-xlsx library in my project.
I installed xlsx npm install xlsx
and jszip npm install jszip
and added them in my index.html
<script src="node_modules/xlsx/dist/xlsx.core.min.js"></script>
<script src="node_modules/jszip/dist/jszip.min.js"></script>
and added the typescript defitions tsd install xlsx
and I'm using webpack
but when I used it in
import * as xlsx from 'xlsx';
but i get error module build failed: error: cannot resolve module 'xlsx'
回答1:
An easier method would be not using typings at all:
Add xlsx.core.min.js to your index.html file as you did. (I'm using angular-cli so my js files get copied to the dist/vendor directory)
<script src="vendor/xlsx/dist/xlsx.core.min.js"></script>
In your module, do not use import but declare XLSX under your imports block.
declare var XLSX: any;
If you're using angular-cli, you will need to add xlsx to your angular-cli-build.js file.
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)' ]}) };
回答2:
tryout ts-xlsx, it's simple to use
npm install --save ts-xlsx
then install the typings
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(...)
回答3:
The following is a working component who exports an xlsx file from an array of objects using js-xlsx lib on Angular 2/4:
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'); } }
You have to install xlsx and file-saver for this to work.
For the working example on exporting a xlsx file from an array of jsons on Angular2/4:
https://github.com/bogdancar/xlsx-json-to-xlsx-demo-Angular2
回答4:
Something else you might try is changing the link to use the full version, instead of core. The following worked for me:
<script lang="javascript" src="dist/xlsx.full.min.js"></script>
This will change with your path. Yours would be:
<script src="node_modules/xlsx/dist/xlsx.full.min.js"></script>
回答5:
I installed the xlsx package, e.g. "npm install --save xlsx". It updated the package.json file with xlsx as a dependency. And now in my component I can import it, e.g. "import * as XLSX from 'xlsx' ". I'm using Angular 4. I guess, in Angular 2 it should work exactly the same way. P.S. There is no need to include the javascript file in the index.html.
回答6:
For making xlsx work for angular 2+, you don't need any typings to be installed. Because the xlsx library contains the required typings in the package itself.
Step 1: Install xlsx using npm
npm install xlsx
Step 2: Import xlsx in your service/component.
const XLSX = require('xlsx');
OR
import * as XLSX from 'xlsx';
-- (This did not work for me)
Step 3: You can use the XLSX as below.
XLSX.utils.json_to_sheet(json);