Question

我是角色2的新人。我尝试上传PDF并使用ng2-pdf-viewer在用户界面中显示其缩略图，但我面临着这样的错误。

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)

我的代码如下。

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];
    }
  }
}

任何人都可以帮助我。

Answer 1

在 app.component.html 和 app.component.ts 中进行了一些更改。现在它的作品。

<强> 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;
    }

}

上传的PDF文件中的缩略图查看问题（Angular 2）

1 个答案: