web-dev-qa-db-ja.com

Angular2表示PDF

ASP.Net Web APIを使用したangular2プロジェクトがあります。サーバー上のドキュメントに移動するデータベースからファイルパスを取得するコードがあります。次に、このドキュメントをブラウザの新しいタブに表示します。誰もこれを行う方法を提案していますか？

Angular2（TypeScript）またはAPIでファイルを取得し、ストリーム配信します。

これは私のAPIでそれを取得する私の試みですが、Angular2でそれを受信して​​適切に表示する方法を見つけることができません：

public HttpResponseMessage GetSOP(string partnum, string description)
    {
        var sopPath = _uow.EpicorService.GetSOP(partnum, description).Path;
        HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
        var stream = new FileStream(sopPath, FileMode.Open);
        result.Content = new StreamContent(stream);
        result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
        return result;
    }

どんな助けも大歓迎です。

どうもありがとう！！！

pdfangularasp.net-web-apifilestream
19
DaRoGa

まず、httpリクエストのオプションを設定する必要があります。responseTypeをResponseContentType.Blobに設定し、blob()を使用して応答をblobとして読み取り、そのタイプをapplication/pdf：

downloadPDF(): any {
    return this._http.get(url, { responseType: ResponseContentType.Blob }).map(
    (res) => {
            return new Blob([res.blob()], { type: 'application/pdf' })
        }
}

次に、ファイルを取得するには、subscribeを追加する必要があります。新しいObjectURLを作成し、window.open()を使用してPDFをnewで開きます。タブ：

this.myService.downloadPDF().subscribe(
        (res) => {
        var fileURL = URL.createObjectURL(res);
        window.open(fileURL);
        }
    );
38
Stefan Svrkota

Angular v.5.2.1 answer：

In *.services.ts

downloadPDF(): any {
    return this._httpClient.get(url, { responseType: 'blob'})
            .map(res => {
            return new Blob([res], { type: 'application/pdf', });
        });
  }

そして*.component.ts

downloadPDF() {
    let tab = window.open();
    this._getPdfService
      .downloadPDF()
      .subscribe(data => {
        const fileUrl = URL.createObjectURL(data);
        tab.location.href = fileUrl;
      });
  }

新しいタブを開始して開くことが重要ですbeforeサービスを呼び出します。次に、このタブのURLをfileurlに設定します。

14
jonas

アンギュラー5

私はそれで数日失った同じ問題を抱えていました。

ここで私の答えは他の人を助けるかもしれません、それはpdfをレンダリングするのを助けました。

私にとっては、responseType： 'arraybuffer'として言及しても、それを取ることができませんでした。

そのためには、responseTypeとして言及する必要があります： 'json'として 'arraybuffer'。（ Reference ）

作業コード

service.ts

downloadPDF(): any {
return this._httpClient.get(url, { responseType: 'blob' as 'json' })
        .map(res => {
        return new Blob([res], { type: 'application/pdf', });
    });

}

component.ts

this.myService.downloadPDF().subscribe(
    (res) => {
    var fileURL = URL.createObjectURL(res);
    window.open(fileURL);
    }
);

以下のリンクから参照

https://github.com/angular/angular/issues/18586

5
MPPNBD

Angular 2+サンプルPDFビューア

Page.html

<div class="container">
<div>
    <label>PDF src</label>
    <input type="text" placeholder="PDF src" [(ngModel)]="pdfSrc">
</div>
<div>
    <label>Page:</label>
    <input type="number" placeholder="Page" [(ngModel)]="page">
</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]="pdfSrc"
                        [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]="pageurl" type="application/pdf"></iframe>
        </div>
    </div>
</div>
<br><br>
<h2> PDF in Object Tag</h2>
<object width="500" height="600"  data="https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf" type="application/pdf"></object>

page.ts

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

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

  pdfSrc = 'https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf';
  page: number = 1;
  pageurl: SafeResourceUrl;

  constructor(private domSanitizer: DomSanitizer) {
     }
      ngOnInit() {
      this.pageurl = this.domSanitizer.bypassSecurityTrustResourceUrl(this.pdfSrc);
     }
     title = 'Mohsen';
     }

app.module.ts

追加

import { FormsModule } from '@angular/forms'; 
import { PdfViewerComponent } from 'ng2-pdf-viewer';
import { HttpModule } from '@angular/http';.
import {HttpClientModule} from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';

インポートする

imports: [
    BrowserModule,
    HttpClientModule,
    HttpModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
],
0
Abdul-Mohsen Al-Enazi