如何在Android端通过<iframe>正常显示PDF文件

问题说明 #

现有项目通过<iframe>加载PDF文件，在PC和Android端均能正常显示，但自行搭建的简单项目里，Android端无法正常渲染PDF，仅PC端显示正常。

使用的核心代码：

<iframe src="file.pdf" width="100%" height="500px"></iframe>

• Android端显示异常：
• PC端显示正常：

可行解决方法 #

1. 配置服务器PDF MIME类型 #

部分服务器默认未正确配置PDF的MIME类型，导致Android浏览器无法识别文件格式：

• Nginx：在站点配置或nginx.conf中添加

types {
    application/pdf pdf;
}

• Apache：在.htaccess或httpd.conf中添加

AddType application/pdf .pdf

2. 借助Google Docs Viewer代理渲染 #

针对Android浏览器原生PDF支持不足的问题，可通过Google Docs Viewer中转渲染：

<iframe src="https://docs.google.com/gview?url=https://你的域名/file.pdf&embedded=true" width="100%" height="500px"></iframe>

注意：需确保PDF文件可公开访问，否则Google无法抓取渲染。

3. 使用PDF.js库替代原生iframe #

Mozilla的PDF.js是专门用于网页渲染PDF的开源库，兼容性更强，不受浏览器原生支持限制：

<!-- 本地部署PDF.js后使用 -->
<iframe src="/pdfjs/web/viewer.html?file=/file.pdf" width="100%" height="500px"></iframe>

<!-- 或直接使用CDN -->
<iframe src="https://mozilla.github.io/pdf.js/web/viewer.html?file=https://你的域名/file.pdf" width="100%" height="500px"></iframe>

4. 验证文件路径与访问权限 #

• 直接在Android浏览器中输入PDF文件的完整URL，确认文件可正常访问
• 检查服务器是否对PDF文件设置了跨域、权限验证等限制

内容的提问来源于stack exchange，提问作者Zainal Abidin