จาวาสคริปต์ - Angular2 FileSaver.js
ฉันกำลังใช้ FileSaver.js ร่วมกับ Angular 2 และมันใช้งานได้ดีทีเดียว; อย่างไรก็ตาม ฉันได้รับข้อผิดพลาดเชิงความหมายในระหว่างการสร้าง:
ข้อผิดพลาด TS2304: ไม่สามารถหาชื่อ 'saveAs' ได้
ฉันกำลังใช้ Angular 2 seed และได้เพิ่มไลบรารีลงใน project.config ของฉันแบบนี้:
this.NPM_DEPENDENCIES = [
...this.NPM_DEPENDENCIES,
{src: 'file-saver/FileSaver.min.js', inject: true},
];
this.SYSTEM_CONFIG_DEV.paths['file-saver'] =
`${this.APP_BASE}node_modules/file-saver/FileSaver`;
this.SYSTEM_BUILDER_CONFIG.packages['file-saver'] = {
main: 'FileSaver.js',
defaultExtension : 'js'
};
ฉันสามารถใช้ saveAs ในคอมโพเนนต์ของฉันได้:
downloadFile(data: any){
var blob = new Blob([data], { type: 'text/csv' });
//saveAs is a function in the FileSaver.js library https://github.com/eligrey/FileSaver.js
saveAs(blob, "results.csv");
}
ปัญหาคือข้อผิดพลาดเชิงความหมายทำให้การสร้างของฉันล้มเหลวเมื่อถูกส่งไปยังสภาพแวดล้อมคลาวด์ของฉัน
ฉันได้ลองเพิ่มการพิมพ์ผ่าน:
npm i @types/file-saver
นี่ช่วยให้ฉันสามารถนำเข้าได้:
import { saveAs } from 'file-saver';
อย่างไรก็ตาม นี่ทำให้ฉันเกิดข้อผิดพลาด:
h.saveAs ไม่ใช่ฟังก์ชัน
คำตอบ #1
จริงๆ แล้วเพิ่งหาคำตอบได้ ฉันต้องประกาศตัวแปรเพื่อให้ TypeScript ใช้งานมันได้:
declare var saveAs:any;
คำตอบ #2
เนื่องจากไม่มีการพิมพ์ชนิดสำหรับ FileSaver ฉันจึงใช้วิธีดังต่อไปนี้
สำหรับ Typescript 1.8 คุณสามารถนำเข้าโดยใช้
- ดาวน์โหลดไฟล์ FileSaver.js จากลิงก์ด้านล่างและบันทึกในโฟลเดอร์โปรเจกต์ของฉัน
https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js
2. จากนั้นในคอมโพเนนต์ฉันต้องการใช้ FileSaver ฉันได้โหลดไฟล์ FileSaver.js ที่บันทึกไว้แล้วและกำหนดการอ้างอิงให้กับมันโดยใช้
ให้ fileSaver=require('../../assets/js/FileSaver');
ทันทีหลังจากที่ฉันนำเข้า
ตอนนี้ทุกที่ที่ฉันต้องการบันทึกไฟล์โดยใช้ FileSaver ฉันจะเรียกมันโดยใช้
fileSaver.saveAs(blob, fileName);
อย่างไรก็ตาม สำหรับ Typescript 2.x คุณสามารถนำเข้าโดยใช้
import * as filesaver from '../../assets/js/FileSaver';
และใช้มันเป็น:
fileSaver.saveAs(blob, fileName);
