Angular 10用ngx-doc-viewer加载Blob URL遇Google Doc Viewer 400错误

核心结论 #

Google Doc Viewer不支持Blob URL作为文件源地址，ngx-doc-viewer仅作为各文档查看器的封装层，问题根源在于Google Doc Viewer的服务限制。

原因分析 #

Blob URL（如blob:http://companyurl/7d5d56ac-4b09-4ba7-ab7c-8246d5c96aa1）是浏览器在本地生成的临时URL，仅能在当前浏览器会话内访问，Google Doc Viewer的服务器无法获取到你本地浏览器中的Blob资源，因此会返回400错误，提示请求格式无效。

解决办法 #

1. 上传文件到公网可访问服务器 #

将Blob文件上传到公网服务器，获取对应的HTTP/HTTPS URL后，再传给ngx-doc-viewer的Google Viewer。示例代码调整：

// 假设已完成文件上传，获取到公网可访问URL
this.url.href = "https://your-public-server.com/files/target-document.pdf";

<ngx-doc-viewer [url]="url?.href" [viewer]="'google'"></ngx-doc-viewer>

2. 切换支持本地Blob的查看器 #

ngx-doc-viewer内置了部分可直接处理本地Blob的查看器，无需依赖外部服务器：

• 若为PDF文件，使用内置PDF查看器：

  // 直接传入Blob对象，无需转换为Blob URL
  this.targetBlob = file; // file是你的Blob对象
  

  <ngx-doc-viewer [blob]="targetBlob" [viewer]="'pdf'"></ngx-doc-viewer>
  

• 尝试微软在线查看器（部分文档格式支持本地Blob）：

  <ngx-doc-viewer [blob]="targetBlob" [viewer]="'microsoft'"></ngx-doc-viewer>
  

内容的提问来源于stack exchange，提问作者Katie Ricks