ng2-pdf-viewer Error: Invalid parameter object: need either .data, .range or .url

user_8388750 0
Viewed 8258

I am trying to use ng2-pdf-viewer in my Angular 7 project. Initially, I was having a cors issue which I solved with this advice. Now, I am experiencing the following error:

Invalid parameter object: need either .data, .range or .url
at Object.getDocument (pdf.js:7919)
at PdfViewerComponent.push.../../../node_modules/ng2-pdf-viewer/ng2-pdf-viewer.es5.js.PdfViewerComponent.loadPDF

I tried to implement the answer from this post, but had no luck. It may be correct and I am misunderstanding how to implement.

my ts: 

import {Component, OnInit} from '@angular/core'
import {DomSanitizer, SafeUrl} from '@angular/platform-browser'

@Component({
    selector:'app-help-dialog',
    templateUrl:'./helpDialog.html',
    styleUrls:['../../style/style.css']
})
export class HelpDialog implements OnInit {

    pdfSource:string = 'https://url/to/my/pdf.pdf'
    safeUrl:SafeUrl

    constructor(private sanitizer: DomSanitizer) {
    }

    ngOnInit() {
        this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.pdfSource)
    }
}

and my template:

<pdf-viewer [src]='safeUrl'>
</pdf-viewer>
angular url pdf
2 Answers

If you are using url, then what you should do is just use pdfSource instead of safeUrl.

If you are using base64 encoding this is how I fixed it: In .html file

<pdf-viewer [src]="pdfSource"></pdf-viewer>

In .ts file

import { Component, OnInit } from '@angular/core';

@Component({
        ...
})
export class testComponent implements OnInit {
    base_64_string = 'this_is_where_you_put_base_64';
    pdfSource;

    constructor() {}

    ngOnInit() {
        this.pdfSource = this._base64ToArrayBuffer(this.pdfSource);
    }

    _base64ToArrayBuffer(base64) {
        const binary_string = window.atob(base64);
        const len = binary_string.length;
        const bytes = new Uint8Array(len);
        for (let i = 0; i < len; i++) {
            bytes[i] = binary_string.charCodeAt(i);
        }
        return bytes.buffer;
    }
}
user_23051990

Short answer:

<pdf-viewer [src]="safeUrl.changingThisBreaksApplicationSecurity"></pdf-viewer>

you can just access the url via .changingThisBreaksApplicationSecurity, hope this help you or someone else with same issue.

reply this post if there is another requirement.

user_131645060
Related