javascript - 使用javascript以编程方式更改PDF页面？

Question

我正在尝试在 iFrame 中显示 PDF，用于 iPad 上基于 PHP、HTML 和 CSS 的网络“应用程序”。但是，在 iPad 上查看对象或 iFrame 中的 PDF 时，您无法更改正在查看的页面。滚动似乎不起作用。

所以我的想法是我需要创建一个使用 javascript 来更改当前查看的页面的下一个和上一个按钮。但是，如果不在 PDF 中嵌入代码，我似乎无法找到有关如何实现此目的的任何信息。不过，这不是该应用程序的一个选项，因为用户显然不知道如何在他们上传的 PDF 中嵌入代码。

我真的很想了解有关如何在不修改 PDF 的情况下实现此解决方案的任何信息。此外，如果除了使用对象或 iFrame 之外还有其他方法可以在 iPad 上运行，那也很棒。

提前致谢。

Answer 1

这可以使用 PDF.js 完成

他们的网页可以在这里找到:http://mozilla.github.io/pdf.js/

起初我不想使用他们的解决方案，因为我听说它在渲染某些 PDF 时会出现问题。然而，到目前为止，它似乎可以完美呈现我们的 PDF。

这是我用来实现这个过程的一些代码

PDFJS.getDocument('FILE_LOCATION').then(function(pdf) {
    state       = true;
    cur_page    = 1;
    total_pages = pdf.numPages;

    pdf.getPage(cur_page).then(function(page) {
        var scale    = 1.5;
        var viewport = page.getViewport(scale);

        // Prepare canvas using PDF page dimensions
        var canvas  = document.getElementById('the-canvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width  = viewport.width;

        // Render PDF page into canvas context
        var renderContext = {
            canvasContext: context,
            viewport:      viewport
        };
        page.render(renderContext);
    });

    $(".pdf_viewer").on("click", ".prev_page", function(e) {
        e.preventDefault();
        if( state && cur_page > 1 ) {
            --cur_page
            pdf.getPage(cur_page).then(function(page) {
                var scale    = 1.5;
                var viewport = page.getViewport(scale);

                // Prepare canvas using PDF page dimensions
                var canvas  = document.getElementById('the-canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width  = viewport.width;

                // Render PDF page into canvas context
                var renderContext = {
                    canvasContext: context,
                    viewport:      viewport
                };
                page.render(renderContext);
            });
        }
    });

    $(".pdf_viewer").on("click", ".next_page", function(e) {
        e.preventDefault();
        if( state && cur_page < total_pages ) {
            ++cur_page;
            pdf.getPage(cur_page).then(function(page) {
                var scale    = 1.5;
                var viewport = page.getViewport(scale);

                // Prepare canvas using PDF page dimensions
                var canvas  = document.getElementById('the-canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width  = viewport.width;

                // Render PDF page into canvas context
                var renderContext = {
                    canvasContext: context,
                    viewport:      viewport
                };
                page.render(renderContext);
            });
        }
    });

    $(".pdf_viewer").on("click", ".close_window", function(e) {
        e.preventDefault();
        if( state ) {
            state = false;
            pdf.destroy();
        }
    });

编辑:修正了一个拼写错误