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网址：

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>

它工作得很好，所以我希望这个解释可以帮助有人帮助我。

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

1 个答案: