如何在模态窗口（Modal）中展示服务器端PDF文件？

没问题，我来帮你搞定在模态窗口里展示PDF的需求！结合你现有的点击事件脚本，我们可以通过识别文件类型 + 嵌入PDF到模态框的方式实现，具体步骤如下：

1. 先准备模态框的HTML结构 #

首先在页面里添加一个模态窗口的基础结构（这里用Bootstrap的模态框为例，如果你没用Bootstrap，也可以自己写原生模态框，核心逻辑完全通用）：

<!-- PDF展示模态框 -->
<div class="modal fade" id="pdfModal" tabindex="-1" aria-labelledby="pdfModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl"> <!-- 超大尺寸模态框，适配PDF展示 -->
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="pdfModalLabel">示例文件预览</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" style="min-height: 80vh;">
        <!-- 用于嵌入PDF的容器 -->
        <div id="pdfContainer"></div>
      </div>
    </div>
  </div>
</div>

2. 修改你的点击事件脚本 #

接下来更新你现有的JS代码，增加PDF文件判断和模态框填充逻辑：

$(document).ready(function () {
    $('.openExamplefile').on('click', function () {
        var url = $(this).attr("data-url").trim(); // 先去除首尾空格，避免干扰判断
        
        // 保留你原有的空URL处理逻辑
        if (url === "/files/examples/") {
            alert("There is no file selected!"); // 补全你原本的提示内容即可
            return;
        }

        // 判断是否为PDF文件
        if (url.toLowerCase().endsWith('.pdf')) {
            // 清空容器，避免残留之前的预览内容
            $('#pdfContainer').empty();
            // 嵌入PDF文件到容器中
            $('#pdfContainer').append(`
                <embed 
                    src="${url}" 
                    type="application/pdf" 
                    width="100%" 
                    height="100%"
                />
            `);
            // 显示模态框
            $('#pdfModal').modal('show');
        } else {
            // 如果是HTML文件，按你原本的逻辑处理（比如直接跳转或在模态框展示，这里默认跳转）
            window.location.href = url;
        }
    });
});

3. 可选：优化体验的小细节 #

• 如果你没用到Bootstrap，可以自己写原生模态框：用CSS控制display: none/block实现显示隐藏，把PDF嵌入逻辑搬到原生模态框的内容区就行。
• 给<embed>标签加备用内容，兼容不支持PDF嵌入的浏览器：

  <embed src="${url}" type="application/pdf" width="100%" height="100%">
      <p>无法预览PDF，请<a href="${url}">点击下载</a>查看</p>
  </embed>
  

• 自定义模态框尺寸：比如通过CSS调整.modal-dialog的宽高，让PDF展示更贴合需求。

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