Angular pdf显示: SafeValue必须使用[属性]=绑定

在使用Angular框架显示PDF文件时，如果你遇到错误信息提示“SafeValue must use [property]=binding”，这通常是因为Angular的安全机制阻止了不安全的HTML或URL的渲染。Angular使用DomSanitizer服务来确保渲染的内容是安全的。

基础概念

DomSanitizer是一个服务，它可以帮助开发者安全地处理不安全的HTML、CSS、URL等。默认情况下，Angular不允许直接将不安全的值绑定到DOM属性上，以防止跨站脚本攻击（XSS）。

相关优势

使用DomSanitizer可以确保应用程序的安全性，防止恶意代码注入。

类型

• HTML: 使用bypassSecurityTrustHtml
• CSS: 使用bypassSecurityTrustStyle
• URL: 使用bypassSecurityTrustUrl
• Resource URL: 使用bypassSecurityTrustResourceUrl

应用场景

当你需要绑定一个PDF文件的URL到<iframe>或<object>标签的src属性时，你需要使用DomSanitizer来标记这个URL为安全的。

问题原因

错误“SafeValue must use [property]=binding”出现是因为Angular不允许直接将不安全的字符串赋值给某些DOM属性，如src。

解决方法

要解决这个问题，你需要使用DomSanitizer服务的bypassSecurityTrustResourceUrl方法来标记PDF文件的URL为安全的。下面是一个示例代码：

import { Component } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-pdf-viewer',
  template: `<iframe [src]="pdfUrl" width="100%" height="500px"></iframe>`,
})
export class PdfViewerComponent {
  pdfUrl: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) {
    const url = 'https://example.com/path/to/your/pdf.pdf';
    this.pdfUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

在这个例子中，我们首先导入了DomSanitizer和SafeResourceUrl，然后在构造函数中使用sanitizer.bypassSecurityTrustResourceUrl方法来处理PDF文件的URL，使其成为安全的资源URL。

参考链接

• Angular官方文档 - DomSanitizer

通过这种方式，你可以安全地在Angular应用中显示PDF文件，同时遵守Angular的安全策略。