ค้นหาเว็บไซต์

จาวาสคริปต์ - 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 คุณสามารถนำเข้าโดยใช้

  1. ดาวน์โหลดไฟล์ 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);

บทความที่เกี่ยวข้อง