Ng2-pdf-viewer: Load Local file

[shabbir-dhangot]

Hi

How can I load local file in pdf-viewer Like you loading in your DEMO. It showing me below error.

XMLHttpRequest cannot load file:///home/shabbir/Desktop/20-0226-02FMBS.nagar.pdf. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

[Vi-dot]

This is an example

// in template <pdf-viewer [src]="previewSrc" ...
// var yourFile = File Object

let reader = new FileReader();

reader.onloadend = (e: any) => {
   this.previewSrc = e.target.result;
};

reader.readAsArrayBuffer(yourFile);

[michaeljcoyne]

How would this work in a component? I can't get this to work.

[Vi-dot]

Yup

@Component({
  selector: 'your-component',
  template: `<pdf-viewer *ngIf="previewSrc" [src]="previewSrc"></pdf-viewer>`
})
export class YourComponent implements OnInit {

  public previewSrc: string = null;

  public setPreviewFromFile(file: File) {

    let reader = new FileReader();

    reader.onloadend = (e: any) => {
      this.previewSrc = e.target.result;
    };

    reader.readAsArrayBuffer(file);
  }
}

[manojbhardwaj]

npm install [email protected] this is worked for me

[kshitij-kasliwal-bkst]

@Vi-dot can you please share source of your demo which is on https://vadimdez.github.io/ng2-pdf-viewer ?

[Vi-dot]

@kshitij-kasliwal-bkst What more do you need ?

[kshitij-kasliwal-bkst]

@Vi-dot I have followed exactly the steps mentioned to render local PDF file along with the code mentioned above, but pdf-viewer component is empty. Wanted to compare with the demo source code to see if there is something I missed.

[Vi-dot]

For input, I'm using an other library, but it's not required :
"ng2-file-upload": "^1.1.4-2"

Template :

<input type="file" ng2FileSelect [uploader]="uploader" (change)="onFileChanged()"/>
<pdf-viewer *ngIf="previewSrc !== ''"
      [src]="previewSrc"
      [original-size]="false"
></pdf-viewer>

Controller :

@Component({
  templateUrl: './file-import.component.html',
  styleUrls: ['./file-import.component.scss']
})
export class FileImportComponent implements OnInit {

  public previewSrc: string = '';
  public currentFileItem: FileItem = null;

  public uploader:FileUploader;

  constructor(private apiService: ApiService) {
    this.uploader = apiService.getFileUploader();
  }

  ngOnInit() {
  }

  onFileChanged() {
    this.uploader.queue[0] = this.uploader.queue.pop();
    this.previewSrc = '';
    this.currentFileItem = this.uploader.queue[0];

    let reader = new FileReader();

    reader.onloadend = (e: any) => {
      this.previewSrc = e.target.result;
    };

    reader.readAsArrayBuffer(this.currentFileItem._file);
  }
}

[kshitij-kasliwal-bkst]

File control -

<input type="file" formControlName="file" (change)="onFileChange($event)" />

pdf-viewer component -

<pdf-viewer *ngIf="data" [src]="data" style="display: block;" [render-text]="true"></pdf-viewer>

Method -

public onFileChange(event: any) {
    this.file = null;
    let files: File[] = event.target.files;
    if (files.length > 0) {
      this.file = files[0];
      this.filename = this.file.name;
      if (typeof (FileReader) !== 'undefined') {
        let reader = new FileReader();

        reader.onloadend = (e: any) => {
          if (this.file.type === "application/pdf") {
            this.isPdf = true;
            this.data = e.target.result;
          } else {
            this.isPdf = false;
          }
          this.handleAttachmentsInOfflineMode();
        };

        reader.readAsArrayBuffer(this.file);
      }

      if (!this.offline && this.file && this.file.size / 1024 / 1024 > 10) {
        this.isUploadAllowed = false;
        this.addPlainWarningMessage("File size larger than allowed size of 10MB");
      } else {
        this.isUploadAllowed = true;
      }
      this.updateFileControlState();

    } else {
      this.url = null;
      this.pdfContent = null;
      this.content = null;
      this.isUploadAllowed = false;
    }
  }

With this, empty pdf-viewer component gets rendered.

[manojbhardwaj]

In HTML 
<pdf-viewer *ngIf="pdfSrc"  class='pdfviwer'  [src]="pdfSrc" 
            [page]="page"
            [original-size]="false"
            [zoom]="zoom_to"
            style="display: block;"
            [show-all]="false"
            (after-load-complete)="pdfDidLoad($event)"></pdf-viewer>

in typescript

this.data = this.navParams.get('pdfdata');
    console.info(this.data)

---(after-load-complete----
 pdfDidLoad(pdf: any) {
    console.info(pdf)
    this.loading.loadingend('loadingend')
    this.totalPages = pdf.numPages;
  }

 this.callfirst()   into constructor  or   ionViewDidLoad()

 callfirst(){
    var xmlhttp = new XMLHttpRequest(),
    method = 'GET',
    url = this.data.paper_pdf;
     xmlhttp.open(method, url, true);
      xmlhttp.responseType = 'blob';
      xmlhttp.onload = (e: any) => {
       console.log(xmlhttp);
    if (xmlhttp.status === 200) {
      let blob = new Blob([xmlhttp.response], {type: 'application/pdf'});
      this.pdfSrc = URL.createObjectURL(blob);
    }
  };
  xmlhttp.onerror = (e: any) =>{
    console.info(e,'eerr')
  }
  xmlhttp.send();
  }

[Vi-dot]

@kshitij-kasliwal-bkst did you print your data with console.log(this.data); ?

[Vi-dot]

@manojbhardwaj, I was talking to @kshitij-kasliwal-bkst 😆
By the way, to make your code more readable, you can use this, in your post :

```typescript

_[your code there]_

```

[kshitij-kasliwal-bkst]

Yes, prints ArrayBuffer with byte length as 3198262.

ArrayBuffer(3198262) {}
byteLength
:
3198262
__proto__
:
ArrayBuffer
byteLength
:
(...)
constructor
:
ƒ ArrayBuffer()
slice
:
ƒ slice()
Symbol(Symbol.toStringTag)
:
"ArrayBuffer"
get byteLength
:
ƒ byteLength()
__proto__
:
Object