显示大型PDF以供移动(web开发)站点/使用的最佳方式

Question

我需要显示一个超过100页的PDF (是的，它是巨大的)在一个移动网站。这是行不通的，我需要想出一个替代方案。

我使用PHP作为后端，jQueryMobile库作为移动框架。

我正在考虑将PDF转换为html，但接下来有一个问题，即如何预先加载每个页面或加载所有页面(就像多页面布局w/ JQM可以做到的那样)。

我在考虑让每个页面都有一个AJAX请求，并以这种方式加载它，但我想从任何替代方法/想法上获得一个新的观点。

我还担心连接速度，因为移动设备从Edge，3G，4G，无线等不同。因此，使加载时间尽可能快是必须的。

更新: PDF文件大小约为9MB，确实不是很大，但对于连接速度较慢的移动浏览器来说，这将需要一段时间才能显示，这是如果它没有先超时的话

提前谢谢。

Answer 1

我会这样做，因为您并没有真正提供PDF (可能需要书签、图形、导航链接和其他复杂内容)，而只是需要加载大量内容，并确保请求不会太大而导致页面超时。

关注点：

• 大型文件大小和超时
• 必须服务于整个协议

第一步

使每个页面成为它自己的原始文本组件。为此，您可以为每个页面创建单独的文件，或者让一个PHP脚本提供内容的各个页面。谷歌到处都是能把PDF转换成文本的PHP。

出于我们的目的，您有一个提供内容的PHP文件，使用这个方法：./agreement.php?page=1

第二步

将内容请求到div中，使用递归使其在第一个页面成功加载后加载下一个页面(而不是之前或之后。异步可能就是这样的混乱。)

//Untested code
function loadPages(n) {
    $.ajax({
        url: './agreement.php',
        data: {'page':n},
        error : function (){ loadPages(n) }, //Try to load again
        success: function (pageData) {
            n++;
            $('#agreementBox').append(pageData);//Puts data into document
            if (n > 100) {return 0;} //Exit recursion on 100th page being appended
            loadPages(n); //Recursive call, loads next page after this one has been loaded
        }
    });
}
loadPages(1); //Call function for the first time.

关注点

重试将其保持为简单的文本，100页的图形数据在相同的渲染中可能会变成memory-intensive.

• Your ajax请求可能会因为许多原因而失败，我放入的错误

• 不会覆盖所有这些错误，并且可能会永远持续下去，例如php脚本crashes.

• Users可能会在协议完成之前点击memory-intensive.

• Your loading.

• Style.我在我的例子中使用了‘魔术数字’，其中100页是一个硬编码的值，而不是一个常量，当你去实现它的时候，不要这样做。