6

私のビューの 1 つで、URL 経由でアクセスできる PDF を表示したいと思います。これは、ブラウザーで追加のタブを開いたり、PDF をダウンロードしたり (ブラウザーの外部で表示するため) したりせずに行う必要があります。Ember アプリケーション内に埋め込まれて表示されるはずです。

私が考えていることは次のとおりです。

  1. URL を使用して PDF を取得し、ember アプリケーションからアクセスできるようにします。
  2. PDF を表示するには、特別な「PDF ビュー」を使用します。

これは可能ですか？Ember アプリケーションに埋め込まれた PDF を表示するには、どのようなオプションが必要ですか?

4

2 に答える 2

5

PDF を表示するには、ブラウザに PDF プラグインをインストールする必要があるため、PDF の表示は実際には ember とは関係ありません (ブラウザによってはデフォルトでインストールされます)。

とはいえ、私が想像できる解決策は、PDF を参照するリンクに属性をiframe設定するtagName を使用してカスタム ember ビューを作成することです。src

例：

App.PDFView = Ember.View.extend({
  tagName: 'iframe',
  attributeBindings: ['src', 'width', 'height', 'frameborder'],
  src: 'pdffile.pdf',
  width: 800,
  height: 600,
  frameborder: 0
});

width, heightandも使用しましたframeborderが、利便性のためだけなので、iframeの属性の一部を ember 内から簡単に制御できます。ここに動作デモがあります。

より精巧なものを使用して、http://pdfobject.com/ のような js ライブラリを使用することもできますdidInsertElement。これをビューのフックで初期化します。

App.PDFView = Ember.View.extend({
  src: 'pdffile.pdf',
  width: 800,
  height: 600,
  didInsertElement: function() {
    new PDFObject({ 
      url: this.get('src'),
      width: this.get('width'),
      height: this.get('height')}
    ).embed(this.get('elementId'));
  }
});

（後者はテストしていませんが、要点はわかります）

そして、これApp.PDFViewをテンプレートで通常の ember ビューのように使用します。

{{view App.PDFView}}

またはsrc、width&heightをテンプレート内から直接設定することもできます

{{view App.PDFView src="pdffile.pdf" width="600" height="800"}}

それが役に立てば幸い。

于 2013-08-24T14:24:21.500 に答える