6

在我的一个观点中，我想显示一个可以通过 URL 访问的 PDF。无需在浏览器中打开额外的选项卡，也无需下载 PDF（在浏览器外查看）即可完成此操作。它应该在 Ember 应用程序中嵌入可见。

我的想法是：

  1. 使用 URL 获取 PDF 并使其可供 ember 应用程序访问。
  2. 使用特殊的“PDF 视图”来显示 PDF。

这可能吗？在 Ember 应用程序中显示嵌入的 PDF 有哪些选项？

4

2 回答 2

5

显示 PDF 与 ember 并没有真正的关系，因为要查看 PDF，您需要在浏览器中安装一个 PDF 插件（默认情况下大部分安装取决于浏览器）。

也就是说，我可以想象的一个可能的解决方案是创建一个带有 tagName 的自定义 ember 视图iframe，您在该视图上将src属性设置为引用 PDF 的链接。

例子：

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

我也使用了width,只是为了方便，您可以在 ember 中轻松控制 的某些height属性。这是一个工作演示。frameborderiframe

您还可以使用更详细的内容并使用像http://pdfobject.com/didInsertElement这样的 js 库，然后在视图的挂钩中对其进行初始化：

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 回答
0

您当然可以通过执行以下操作来利用 Ember PDFJS 插件：

ember install ember-pdfjs

GitHub 上的README描述了安装和用例。

简而言之，插件为您的 Ember 项目提供了一个组件，pdf-document您可以在 HTMLBars 模板中使用它，如下所示：

{{pdf-document src=[model.src]}}

...还有其他可能的排列src方式（包括字符串文件路径、资源 URI 或Uint8Array缓冲区）。

如果您没有看到您需要的功能，请在问题中提出建议。

于 2017-03-06T21:55:33.300 回答