Thumbnail View Problem in hochgeladenen PDF-Datei (Angular 2)

Question

Ich bin neu in eckigen 2. Ich habe versucht, ein PDF hochzuladen und sein Thumbnail in der UI unter Verwendung ng2-pdf-viewer anzuzeigen, aber ich stehe auf einen solchen Fehler.

AppComponent.html:10 ERROR Error: Invalid parameter object: need either .data, .range or .url 
    at error (pdf.combined.js:357) 
    at Object.getDocument (pdf.combined.js:11832) 
    at PdfViewerComponent.webpackJsonp../node_modules/ng2-pdf-viewer/dist/pdf-viewer.component.js.PdfViewerComponent.loadPDF (pdf-viewer.component.js:89) 
    at PdfViewerComponent.webpackJsonp../node_modules/ng2-pdf-viewer/dist/pdf-viewer.component.js.PdfViewerComponent.ngOnChanges (pdf-viewer.component.js:78) 
    at checkAndUpdateDirectiveInline (core.es5.js:10891) 
    at checkAndUpdateNodeInline (core.es5.js:12382) 
    at checkAndUpdateNode (core.es5.js:12321) 
    at debugCheckAndUpdateNode (core.es5.js:13182) 
    at debugCheckDirectivesFn (core.es5.js:13123) 
    at Object.eval [as updateDirectives] (AppComponent.html:10) 

Meine Codes sind unten angegeben.

app.component

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import {FormsModule} from '@angular/forms'; 

import { AppComponent } from './app.component'; 
import { PdfViewerComponent } from 'ng2-pdf-viewer'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    , PdfViewerComponent], 
    imports: [ 
    BrowserModule, 
    FormsModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 
platformBrowserDynamic().bootstrapModule(AppModule); 

app.component.html

<div class="container"> 
<div class="form-group col-sm-3"> 
      <label for="">PDF file</label> 
      <input type="file" (change)="fileChange($event)" accept=".pdf"> 
     </div> 
    <div class="row"> 
     <div class="col-md-5"> 
      <div class="thumbnail" style="width: 150px;height: 200px;" (click)="pdfShow=!pdfShow"> 
       <p>click me to view PDF in Iframe!</p> 
       <pdf-viewer [src]="fileData" 
          [page]="page" 
          [original-size]="false" 
          style="display: block;" 
       ></pdf-viewer> 
      </div> 
      <br> 
     </div> 
     <div class="col-md-7"> 
      <div *ngIf="pdfShow"> 
       <h4>PDF in Iframe</h4> 
       <iframe width="500" height="600" [src]="fileData" type="application/pdf"></iframe> 
      </div> 
     </div> 
    </div> 
</div> 

app.component.ts

import { Component } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser' 

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

    fileData: File; 
    fileChange(event) { 
    let fileList: FileList = event.target.files; 
    if (fileList.length > 0) { 
     this.fileData = fileList[0]; 
    } 
    } 
} 

kann mir jemand helfen.

Answer 1

Einige Änderungen vorgenommen in app.componence.html und app.component.ts. Jetzt funktioniert es.

app.component.html

<div class="container"> 
<div class="form-group col-sm-3"> 
      <label for="">PDF file</label> 
      <input type="file" (change)="fileChange($event)" accept=".pdf"> 
     </div> 
    <div class="row"> 
     <div class="col-md-5"> 
      <div class="thumbnail" style="width: 150px;height: 200px;"> 
       <pdf-viewer [src]="pdfSrc" 
          [page]="page" 
          [original-size]="false" 
          style="display: block;" 
       ></pdf-viewer> 
      </div> 
      <br> 
     </div> 
    </div> 
</div> 

app.component.ts

import { Component } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser' 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    pdfSrc; 
    loaded; 
    ngOnInit() { 
    } 

    file: File; 
    fileChange(event) { 
    let fileList: FileList = event.target.files; 
    if (fileList.length > 0) { 
    this.handleInputChange(event); 
    } 
    } 

    handleInputChange(e) { 
     this.file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0]; 

     var reader = new FileReader(); 

     this.loaded = false; 
     reader.onload = this._handleReaderLoaded.bind(this); 
     reader.readAsDataURL(this.file); 
    } 

    _handleReaderLoaded(e) { 
     var reader = e.target; 
     this.pdfSrc = reader.result; 
     this.loaded = true; 
    } 

}