Question

我正在尝试将iframe源设置为base64数据包含以下格式的PDF，

JS

$http.get('../../xyz', { token: $scope.token})
   .success( function(response) {
       $scope.reportBase64String = 'data:application/pdf;base64,' + response.data;
   });

HTML

<iframe id="report" ng-src="{{reportBase64String}}"></iframe>

错误

$ sceDelegate policy不允许阻止从url加载资源。

Answer 1

您可以浏览严格上下文转义的文档Doc

但是现在我建议你注射$sce 并且您提供的文件路径将其更改为

$scope.reportBase64String=$sce.trustAsResourceUrl('data:application/pdf;base64,' + response.data);

Answer 2

在Angular 2+中

.ts文件

import { DomSanitizer } from '@angular/platform-browser';

this.http.get(url).subscribe(res => {
    if (res.data) { //res.data must be base64 data format
      this.src = this.sanitizer.bypassSecurityTrustResourceUrl('data:application/pdf;base64,' + res.data);
    }
  }

.html文件

<iframe width="100%" height="100%" [src]="mainfestHtml"></iframe>

如果要隐藏工具栏，则只需在base64字符串之后添加＃toolbar = 0

this.src = this.sanitizer.bypassSecurityTrustResourceUrl('data:application/pdf;base64,' + res.data + '#toolbar=0&navpanes=0');

Angular方式将iframe src设置为base64数据

2 个答案: