如何实现点击触发PDF加载的原生HTML页面，避免默认下载大文件

嘿，这个需求太合理了——谁也不想打开页面就被迫下载100MB的大文件对吧？完全可以用原生HTML+JavaScript搞定，不需要任何第三方插件，逻辑简单直接，看下面的方案：

核心思路 #

初始页面只显示触发按钮，不设置<object>的data属性（浏览器只有看到data才会自动请求资源），等用户主动点击按钮后，再动态给<object>添加上PDF的地址，这样就只会在用户确认后才开始下载PDF。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <title>按需加载PDF</title>
    <style>
        .pdf-container {
            width: 100%;
            height: 500px;
            border: 1px solid #ccc;
            /* 初始容器加个浅灰背景，提示用户这是待加载区域 */
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #loadPdfBtn {
            padding: 12px 24px;
            font-size: 16px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
        }
        #loadPdfBtn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="pdf-container">
        <!-- 初始只有按钮，object标签先隐藏且不带data属性 -->
        <button id="loadPdfBtn">点击加载100MB PDF文件</button>
        <object id="pdfViewer" type="application/pdf" width="100%" height="100%" style="display: none;"></object>
    </div>

    <script>
        const loadBtn = document.getElementById('loadPdfBtn');
        const pdfViewer = document.getElementById('pdfViewer');
        const pdfUrl = '/file.pdf'; // 你的PDF文件地址

        loadBtn.addEventListener('click', () => {
            // 给object设置data属性，触发浏览器请求并加载PDF
            pdfViewer.setAttribute('data', pdfUrl);
            // 显示PDF容器，隐藏触发按钮
            pdfViewer.style.display = 'block';
            loadBtn.style.display = 'none';
            
            // 可选：添加加载状态提示，避免重复点击
            // loadBtn.textContent = '加载中...';
            // loadBtn.disabled = true;
        });
    </script>
</body>
</html>

关键细节说明 #

• 初始状态：<object>标签没有data属性且默认隐藏，浏览器不会发起任何PDF资源请求，完美避免自动下载大文件。
• 点击触发：用户点击按钮后，通过JS动态设置data属性，此时浏览器才会开始下载并渲染PDF。
• 用户体验优化：可以给按钮添加加载状态（比如改成“加载中”并禁用），初始容器的浅灰背景也能让用户清晰识别待加载区域。
• 兼容性：原生<object>标签在现代主流浏览器中都支持PDF渲染，不需要额外插件，完全符合你的需求。

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