将 Iframe src 设置为 base64 数据的角度方式答案

【问题标题】：Angular way to set Iframe src to base64 data将 Iframe src 设置为 base64 数据的角度方式
【发布时间】：2016-12-13 19:03:22
【问题描述】：

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

$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 策略不允许从 url 加载资源。

【问题讨论】：

标签： html angularjs iframe

【解决方案1】：

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

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

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

【讨论】：

【解决方案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');

【讨论】：