显示用于移动（Web开发）站点/使用的大型PDF的最佳方式

Question

I need to display a PDF with over 100 pages (yeah it's huge) in a mobile website. This is not going to work and I need to come up with an alternative solution.

I'm using PHP as the backend and jQueryMobile lib as the mobile framework.

I was thinking to convert the PDF to html but then there is the question about how to load each page or load all the pages before hand (as a multi page layout w/ JQM can do).

I was thinking about having each page a AJAX request and loading it this way but wanted to get a fresh point of view on any alternative methods/ideas.

I'm also concerned about connection speed as mobile devices vary from Edge, 3G, 4G, wireless, etc... so making the load time(s) as fast as possible is a must.

UPDATE: The PDF file size is around 9MB, yeah it's not a lot but for a mobile browser over a slow connection speed this will take some time to display and that's if it doesn't timeout first

Thanks in advance.

Answer 1

I would do something like this, as you're not really providing a PDF (which may require bookmarks, graphics, navigation links, and other complex content), but simply need to load a lot of content and make sure the request isn't so large that the page times out.

Concerns:

• Large file size and timeouts
• Must serve entire agreement

Step one

Make each page as its own raw-text component. You can do this by either making individual files with each page, or have one PHP script serve out individual pages of the content. Google is littered with PHP that translates PDF into text.

For our purposes, you have one PHP file that serves out content, in this method: ./agreement.php?page=1

Step two

Request content into a div, use recursion to make it load the next page after the first one successfully loads (not before, or later. Asynchronous can be messy like that.).

//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.

Concerns

• Keep it to simple text, 100 pages of graphical data in the same rendering may become memory-intensive.
• Your ajax request may fail for any number of reasons, the error re-try I put in won't cover off all of them, and may go on forever, in cases such as the php script crashes.
• Users might hit agree before agreement is done loading.
• Style. I use 'magic numbers' in my example, where 100 pages is a hard-coded value and not a constant, don't do that when you go to implement this.