如何修改a标签代码让PDF在浏览器打开而非下载？

关键说明 #

PDF是直接预览还是下载，核心由服务器返回的Content-Disposition响应头决定：

• 当响应头为Content-Disposition: inline时，浏览器会尝试在页面内预览PDF
• 当响应头为Content-Disposition: attachment时，浏览器会触发文件下载

具体修改方案 #

方案1：调整服务器端响应头（最可靠） #

修改后端GetFile接口的逻辑，当请求的文件是PDF时，设置以下响应头：

Content-Disposition: inline; filename="你的文件名.pdf"
Content-Type: application/pdf

这是从根源解决问题的方式，能保证所有支持PDF预览的浏览器都正常显示文件。

方案2：前端页面改造（无法修改后端时使用） #

通过JavaScript在新窗口嵌入iframe来强制触发预览，替换你的原代码为：

<a class="fa fa-file-pdf-o fa-3x attachFile" href="javascript:void(0);" onclick="openPdfPreview()">
</a>

<script>
function openPdfPreview() {
  const pdfUrl = "/gsuggestionsystem/Proposal/Desktop/GetFile/b57755fa-4f49-ee11-b365-005056b467aa?entityType=6";
  const previewWindow = window.open();
  previewWindow.document.write(`<iframe src="${pdfUrl}" style="width:100%; height:100%; border:none;"></iframe>`);
  previewWindow.document.close();
}
</script>

这种方式利用iframe的加载特性，让浏览器在新窗口中尝试预览PDF文件。

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