ng2-pdf-viewer 错误：无效的参数对象：需要 .data、.range 或 .url答案

【问题标题】：ng2-pdf-viewer Error: Invalid parameter object: need either .data, .range or .urlng2-pdf-viewer 错误：无效的参数对象：需要 .data、.range 或 .url
【发布时间】：2018-12-20 23:55:45
【问题描述】：

我正在尝试在我的 Angular 7 项目中使用 ng2-pdf-viewer。最初，我遇到了一个 cors 问题，我解决了 with this advice。现在，我遇到以下错误：

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

我试图实现答案from this post，但没有运气。这可能是正确的，我误解了如何实施。

我的 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)
    }
}

还有我的模板：

<pdf-viewer [src]='safeUrl'>
</pdf-viewer>

【问题讨论】：

你解决了吗？

标签： angular pdf url

【解决方案1】：

如果您使用的是 url，那么您应该使用pdfSource 而不是safeUrl。

如果您使用的是 base64 编码，这就是我修复它的方法：在 .html 文件中

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

在 .ts 文件中

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

【讨论】：

【解决方案2】：

简答：

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

您可以通过 .changThisBreaksApplicationSecurity 访问该网址，希望这对您或遇到相同问题的其他人有所帮助。

如果有其他要求，请回复此帖子。

【讨论】：