问题背景：常规方案的局限性
在搭建PDF文档中心时，我们常依赖Nginx的目录索引（autoindex on）和字符集配置（charset utf-8）实现文件预览。但当遇到中文命名的PDF文件时，常规配置往往陷入三大困局：
- 乱码陷阱：浏览器显示文件名乱码，即使配置
charset也无法根治编码兼容问题； - 路径解析失效：URL自动编码（如
%E6%96%87）导致Nginx无法正确映射物理路径； - 跨平台差异：Windows/Linux文件系统编码差异加剧兼容复杂度。
破局思路：Script脚本与Nginx的协同作战
最终配置文件如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nginx配置相关HTML模拟</title>
</head>
<body>
<!-- 模拟Nginx中location /pdf目录/ 的配置效果 -->
<h2>PDF目录内容展示</h2>
<ul id="pdfDirectory">
<!-- 这里模拟目录索引展示，实际数据需要从后端获取 -->
<li><a href="#" target="_blank">文件1.pdf</a></li>
<li><a href="#" target="_blank">文件2.pdf</a></li>
</ul>
<!-- 模拟autoindex_js.html的功能 -->
<script>
document.addEventListener("DOMContentLoaded", function () {
var links = document.querySelectorAll("#pdfDirectory a");
links.forEach(function (link) {
var href = link.textContent;
link.setAttribute("href", href);
link.setAttribute("target", "_blank");
link.textContent = decodeURIComponent(link.textContent);
});
});
</script>
</body>
</html>
