如何使用Phonegap inAppBrowser预览服务器上的多个PDF文件？

嗨，作为新手能想到这个问题已经很棒啦——完全不需要为每个PDF单独创建HTML页面，只需要一个通用的页面，通过传递URL参数的方式动态加载不同的PDF链接就行，我给你一步步拆解怎么做：

1. 准备一个通用的PDF预览页面 #

创建一个名为pdf-viewer.html的文件，这个页面的作用是接收外部传递的PDF链接，然后调用inAppBrowser打开它。代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF预览</title>
</head>
<body>
    <script>
        // 从URL参数中获取目标PDF的链接
        const urlParams = new URLSearchParams(window.location.search);
        const targetPdfUrl = urlParams.get('pdf');

        if (targetPdfUrl) {
            // 调用inAppBrowser打开PDF，保留工具栏方便导航
            window.open(decodeURIComponent(targetPdfUrl), '_blank', 'location=yes,toolbar=yes,zoom=yes');
        } else {
            // 如果没有传递PDF链接，显示提示
            document.body.innerHTML = '<div style="text-align:center; margin-top:50px;">未找到有效的PDF链接</div>';
        }
    </script>
</body>
</html>

2. 在主应用中动态传递PDF链接 #

不管你要打开哪个服务器上的PDF，只需要在主应用的JavaScript代码里，调用这个通用页面并带上对应的PDF链接参数即可。示例代码：

// 打开第一个PDF的函数
function openFirstPdf() {
    const pdfUrl = 'https://your-server.com/file1.pdf';
    // 用encodeURIComponent处理链接，避免特殊字符导致错误
    cordova.InAppBrowser.open(`pdf-viewer.html?pdf=${encodeURIComponent(pdfUrl)}`, '_blank', 'location=yes');
}

// 打开第二个PDF的函数
function openSecondPdf() {
    const pdfUrl = 'https://your-server.com/file2.pdf';
    cordova.InAppBrowser.open(`pdf-viewer.html?pdf=${encodeURIComponent(pdfUrl)}`, '_blank', 'location=yes');
}

3. 进阶：动态生成PDF列表（如果需要） #

如果你的PDF数量较多，还可以从服务器获取PDF列表，动态生成打开按钮，不用一个个写函数：

// 假设这是从服务器接口拿到的PDF列表数据
const pdfList = [
    { title: '用户操作手册', url: 'https://your-server.com/manual.pdf' },
    { title: '产品规格说明', url: 'https://your-server.com/spec.pdf' },
    { title: '更新日志', url: 'https://your-server.com/changelog.pdf' }
];

// 动态生成按钮并添加到页面
pdfList.forEach(item => {
    const btn = document.createElement('button');
    btn.textContent = item.title;
    btn.style.margin = '10px';
    btn.onclick = () => {
        cordova.InAppBrowser.open(`pdf-viewer.html?pdf=${encodeURIComponent(item.url)}`, '_blank', 'location=yes');
    };
    document.body.appendChild(btn);
});

为什么这么做？ #

• 减少重复代码：只维护一个页面，后续修改样式或功能时，所有PDF预览都会同步更新
• 更灵活：不管新增多少个PDF，只需要传递新的链接参数即可，不用新增文件
• 更符合开发规范：遵循“DRY（Don't Repeat Yourself）”原则，避免冗余

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