使用 angularjs 和 AWS S3 在 html 中显示 pdf 和 docx

Question

我正在使用 AngularJS 和 AWS S3，我正在尝试在浏览器中查看文件（.pdf、.docx、.ppt 等），但我卡住了。

我正在尝试使用 google 文档视图：

<iframe src="http://docs.google.com/gview?url=MY_AWS_S3_URL&embedded=true"></iframe>

但是我在控制台的浏览器中收到this 错误，显然这个文档的视图不起作用。

有人知道发生了什么吗？可能是 S3 权限错误，或者可能是因为 angularjs 不支持它？

编辑： 我试过这个来显示 .pdf 文件，它可以工作，但只适用于 .pdf 文件。

<object width="400" height="500" type="application/pdf" data="your_url" id="pdf_content">
  <p>ERROR!!</p>
</object>

Answer 1

首先，感谢@Michael-sqlbot 告诉我EncodeURIComponent。

第二步是在this 线程之后可信地为AngularJS 设置URL。

事实是，我必须在我的 S3 URL 上做这个：

encodeURIComponent(my.s3_url);

然后我不得不向我的控制器调用 $sce 库（就像我解释的那样，我们必须使 AngularJS 的 URL 可信），如下所示：

JS

.module('module.name')
    .controller('exExExample', [
        '$scope',
        '$location',
        '$sce',
        'info',
    function($scope, $location, $sce, info) {
    this.my.s3_url = info.url;

    // Here I encode my AWS S3 url
    this.my.complete_url ='http://docs.google.com/gview?url=' + encodeURIComponent(my.s3_url) + '&embedded=true';
    //Using a function of the library $sce called trustAsResourceUrl()
    this.my.complete_url = $sce.trustAsResourceUrl(this.complete_url);
  }]);

HTML

<iframe ng-src="{{exemple.my.complete_url}}" ></iframe>

而且效果很好，所以我希望这个解释能帮助像它帮助我的人。