Angular应用无法显示Tomcat 9服务器存储的PDF文件求助

问题根源 #

你存在数据库里的//tomcat/pdf/mypdf.pdf是协议相对路径：浏览器直接粘贴时，会自动补全为本地文件共享协议的file://///tomcat/pdf/mypdf.pdf，所以能正常打开；但Angular应用运行在HTTP环境（比如ng serve启动的localhost:4200）时，//会默认补全为http:///https://，导致请求路径完全错误，自然无法加载PDF。

具体解决方法 #

1. 手动指定file协议（适配本地共享场景） #

如果Tomcat上的PDF是通过本地文件共享访问的，在Angular里给路径补上file://前缀（注意格式要凑够4个斜杠接服务器名，最终为file:////tomcat/pdf/mypdf.pdf）：

• 静态链接直接写：

<a href="file:////tomcat/pdf/mypdf.pdf" target="_blank">打开PDF</a>

• 动态获取的链接，在组件里处理：

// 组件.ts文件
rawPdfUrl = '//tomcat/pdf/mypdf.pdf';

getValidPdfUrl(): string {
  // 替换开头的多斜杠，拼接file协议前缀
  return `file:///${this.rawPdfUrl.replace(/^\/+/, '')}`;
}

模板中调用：

<a [href]="getValidPdfUrl()" target="_blank">打开PDF</a>

2. 改用HTTP协议访问（推荐生产环境） #

把PDF放到Tomcat的webapps目录下（比如新建webapps/pdf文件夹，放入mypdf.pdf），然后用Tomcat的HTTP服务访问，路径格式为http://tomcat:8080/pdf/mypdf.pdf（替换成你的Tomcat实际端口）：

<a href="http://tomcat:8080/pdf/mypdf.pdf" target="_blank">打开PDF</a>

这种方式符合Web应用标准流程，还能避免浏览器对HTTP页面访问file://资源的安全限制。

3. 排查浏览器安全限制 #

如果必须用file://协议，要注意：现代浏览器默认禁止HTTP页面访问本地文件资源。如果是测试场景，可以：

• 把Angular编译后的文件通过file://直接打开（而非用ng serve启动HTTP服务）
• 或者临时解除浏览器的相关安全限制（仅用于测试，不推荐生产）

验证步骤 #

1. 先在浏览器地址栏直接输入file:////tomcat/pdf/mypdf.pdf或http://tomcat:8080/pdf/mypdf.pdf，确认能正常打开PDF
2. 在Angular中用处理后的路径，按F12打开开发者工具，查看「网络」标签里的请求路径是否正确，排查404或跨域报错

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