Typcript - как правильно использовать jsPDF в Angular2?

Я создал приложение Angular2, которое генерирует данные JSON. Я хочу сохранить этот вывод JSON в файл, желательно файл PDF. Это приложение написано с использованием TypScript.Typcript - как правильно использовать jsPDF в Angular2?

Я использовал jsPDF для записи данных JSON в файл PDF. Я установил пакет jsPDF через npm, используя npm install jspdf --save. Я также добавил необходимые ссылки на странице index.html. Я внес эти изменения в свое приложение, когда оно было запущено. Я смог сохранить данные JSON в файл.

Когда я остановил и перезапустил приложение, оно не запустилось так, как ожидалось. Я получил следующую ошибку:

[email protected] start C:\Users*****\Documents\Projects\Angular\json-to-pdf

tsc && concurrently "npm run tsc:w" "npm run lite"

app/components/app.component.ts(35,19): error TS2304: Cannot find name 'jsPDF'.

Я добавляю код, который я использовал.

package.json:

"dependencies": { 
    "@angular/common": "2.0.0-rc.1", 
    "@angular/compiler": "2.0.0-rc.1", 
    "@angular/core": "2.0.0-rc.1", 
    "@angular/http": "2.0.0-rc.1", 
    "@angular/platform-browser": "2.0.0-rc.1", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.1", 
    "@angular/router": "2.0.0-rc.1", 
    "@angular/router-deprecated": "2.0.0-rc.1", 
    "@angular/upgrade": "2.0.0-rc.1", 
    "angular2-in-memory-web-api": "0.0.7", 
    "bootstrap": "^3.3.6", 
    "es6-shim": "^0.35.0", 
    "jquery": "^2.2.4", 
    "jspdf": "^1.2.61", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "systemjs": "0.19.27", 
    "zone.js": "^0.6.12" 
}

index.html:

<html> 
    <head> 
    <title>JSON to PDF</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    .... 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script> 

    .... 

    </head> 

    <!-- 3. Display the application --> 
    <body class="bg"> 
    <div> 
     <app>Loading...</app> 
    </div> 
    </body> 
</html>

app.component.ts:

import {Component} from '@angular/core'; 
@Component({ 
    selector: 'app', 
    template: `<button (click)="createFile()">Export JSON to PDF</button>` 
}) 
export class AppComponent { 
    public item = { 
     "Name" : "XYZ", 
     "Age" : "22", 
     "Gender" : "Male" 
    } 
    constructor() {} 
    createFile(){ 
     var doc = new jsPDF(); 
     var i=0; 
     for(var key in this.item){ 
      doc.text(20, 10 + i, key + ": " + this.item[key]); 
      i+=10; 
     } 
     doc.save('Test.pdf'); 
    } 
}

Я думаю, что некоторые импорта заявление отсутствует в приложении. файл component.ts. Может ли кто-нибудь указать на правильный оператор импорта, если этого не хватает? Если это ошибка, которую я сделал, могу ли я знать, как правильно нас использовать jsPDF в Angular2?

спасибо.

источник

2016-07-21 Sudhashri S Hebbar

Облицовочные же problem..Looking для кого-то, чтобы ответить !!!! –

Вы нашли ответ для этого ?? Я застрял в этой ошибке в течение долгого времени :( –

Использование jspdf с последней угловой версией cli очень просто. Просто установите jspdf из НПХ и использовать это что-то вроде этого:

app.component.ts

// Note that you cannot use import jsPDF from 'jspdf' if you 
// don't install jspdf types from DefinitelyTyped 
let jsPDF = require('jspdf'); 
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app works!'; 

    constructor() { 
    let doc = new jsPDF(); 
    doc.text("Hello", 20, 20); 
    doc.save('table.pdf'); 
    } 
}

Для старых версий угловой кли на основе systemjs вместо WebPack

Here is a link к описанию одного из способов работы с angular-cli и библиотеками в umd или простым javascript. В основном это связано с использованием declare jsPDF: any вместе с импортом библиотеки в файлы поставщика systemjs.

источник

2016-07-29 02:56:45

По-прежнему сталкивается с той же ошибкой !!!! Как использовать этот jspdf в Typcript? –

К сожалению, в файл 'angular-cli-build.js' включен неправильный файл поставщика. обновленный конфиг выше. –

@ Simon Bengtsson, здесь мой вопрос другой :(В моем приложении я не нашел файлов, таких как app.component.ts, src/system-config.ts, angular-cli-build.js. Мне нужно найти сначала, чтобы я мог реализовать шаги, как вы упомянули в своем ответе. –

, как вы бы с помощью угловой командной строки и угловых 4 является первым добавить jspdf в Scripts массив в .angular-cli.json

"scripts": [ 
     "../node_modules/jspdf/dist/jspdf.min.js" 
     ]

затем в компоненте добавьте следующие

import * as JSPdf from 'jspdf';

затем в классе

generatePdf() { 
    let doc = new JSPdf(); 
    doc.text("Hello", 20, 20); 
    doc.save('table.pdf'); 
}

источник

2017-06-09 13:44:56 Dheeraj

Как я могу добавить скрипты в свой ионный проект? я установил jspdf, используя npm, застрял, что делать дальше – user2828442

, даже если вы установили jspdf с помощью npm, будут файлы, подобные приведенной ниже структуре каталогов node_modules/jspdf/dist/jspdf.min.js, вы должны добавить заданные строки, поскольку это под списком скриптов в указанном файле .angular-cli.json –

Typcript - как правильно использовать jsPDF в Angular2?

ответ

Смежные вопросы