Angular 13移动端Web浏览器预览Blob PDF失败求助

针对你遇到的PC端正常、移动端提示“no enabled plugin supports this MIME type”的问题，可尝试以下几种解决方案：

1. 强制指定标准PDF MIME类型 #

部分移动端浏览器对非标准MIME类型兼容性差，不要依赖后端返回的result.file.type，手动指定application/pdf：

let file = new Blob([arrayBuffer], { type: 'application/pdf' });
var fileURL = URL.createObjectURL(file);  
this.url = this.sanitizer.bypassSecurityTrustResourceUrl(fileURL);

2. 添加Blob行结束符参数 #

部分移动端浏览器对Blob的文本编码处理敏感，添加endings: 'native'参数适配系统换行规则：

let file = new Blob([arrayBuffer], { type: 'application/pdf', endings: 'native' });
var fileURL = URL.createObjectURL(file);  
this.url = this.sanitizer.bypassSecurityTrustResourceUrl(fileURL);

3. 改用原生标签触发预览 #

移动端浏览器原生PDF支持通常比iframe更可靠，通过创建临时标签触发系统默认打开方式：

// 组件方法
openPdfNative(arrayBuffer: ArrayBuffer) {
  const blob = new Blob([arrayBuffer], { type: 'application/pdf' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  link.rel = 'noopener noreferrer';
  // 可选：指定文件名，方便用户保存
  link.download = 'document.pdf';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  // 及时释放Blob URL资源
  URL.revokeObjectURL(url);
}

<button (click)="openPdfNative(arrayBuffer)">打开PDF</button>

4. 切换为Base64 Data URI #

部分移动端对Blob URL的iframe支持有限，将ArrayBuffer转为Base64格式的Data URI：

// ArrayBuffer转Base64工具方法
arrayBufferToBase64(buffer: ArrayBuffer): string {
  const uint8Array = new Uint8Array(buffer);
  let binaryStr = '';
  uint8Array.forEach(byte => {
    binaryStr += String.fromCharCode(byte);
  });
  return window.btoa(binaryStr);
}

// 生成预览URL
const base64Str = this.arrayBufferToBase64(arrayBuffer);
this.url = this.sanitizer.bypassSecurityTrustResourceUrl(
  `data:application/pdf;base64,${base64Str}`
);

模板仍使用原iframe即可。

5. 及时释放Blob URL资源 #

组件销毁时释放Blob URL，避免内存泄漏同时可能解决移动端资源加载异常：

import { OnDestroy } from '@angular/core';

export class YourComponent implements OnDestroy {
  url: SafeResourceUrl | null = null;

  ngOnDestroy(): void {
    if (this.url) {
      const rawUrl = this.url.changingThisBreaksApplicationSecurity;
      URL.revokeObjectURL(rawUrl);
    }
  }
}

内容的提问来源于stack exchange，提问作者Jayanthi T