Angular - просмотр PDF из двух разделенных ссылок

Question

На самом деле я пытаюсь просмотреть файл PDF, но основные проблемы заключаются в следующем:

Я использую Restful API, где мне не разрешено вносить какие-либо изменения

У меня два API ( i.to чтобы загрузить ссылку в формате PDF) (ii.upload PDF)

После загрузки PDF с использованием API (ii.upload PDF) я получаю ссылку, например, usr_doc / 13213.pdf

Затем мне нужно добавить один stati c URL перед ссылкой на документ eg.domain.com/users/usr_doc/13213.pdf, чтобы завершить абсолютный путь к файлу PDF.

После этого, если я использую embed, object, iframe для отображения PDF он автоматически загружает файл PDF вместо отображения.

Я знаю, что после прочтения этого вопроса вы можете почувствовать, что он старый, но я попытался ng2-pdf-viewer, ngx-extendedpdf-viewer.

Пожалуйста, помогите мне

    <iframe width="500" height="600" [src]="staticUrl+docUrl" type="application/pdf"></iframe>
    <embed [src]="staticUrl+docUrl" type="application/pdf" width="100%" height="550px" />

Answer 1

Надеюсь, это поможет ...

pdf-viewer.comonent. html

<embed [src]="url" type="application/pdf" width="100%" height="600px" />

pdf-viewer.comonent.ts

url: SafeUrl;
constructor(private domSanitizer: DomSanitizer) { }

ngOnInit() {
 this.url = 
 this.domSanitizer.bypassSecurityTrustResourceUrl('https://vadimdez.github.io/ng2-pdf- 
 viewer/assets/pdf-test.pdf');
}

Answer 2

Наконец-то я получил решение для своего вопроса

Здесь я не использую никакой программы просмотра PDF, я использую только iframe, который действительно работает потрясающе

Это для обычного html, который я нашел здесь

<iframe src="http://docs.google.com/gview?url=yourPdfUrl&embedded=true" style="width:800px; height:500px;" frameborder="0"></iframe>

, затем я изменил его для Angular

app.component. html

<h2>View PDF</h2>

<iframe [src]="sanitizedLink" style="width:800px; height:500px;" frameborder="0"></iframe>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{

  staticUrl ="https://storage.googleapis.com/usr_doc/";

  googleLink:string ="http://docs.google.com/gview?url=";

  sanitizedLink:any;

  pdflink ='usr_dat/doc/a69046d21a29_202002265656.pdf';

  embede='&embedded=true';

  constructor(private domSanitizer: DomSanitizer,){
  }

  ngOnInit(){
    this.sanitizedLink = this.domSanitizer.bypassSecurityTrustResourceUrl( this.googleLink+this.staticUrl+this.pdflink+this.embede);
  }
}

Теперь он отображает PDF без автоматической загрузки