Recently I started working with angular 2 and encountered an issue while trying to upload a PDF file and display its thumbnail in the UI using ng2-pdf-viewer
. The error message I'm facing is:
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)
...
Below are the sections of code involved in my project.
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];
}
}
}
If anyone has experience with this issue, your help would be greatly appreciated.