javascript 自定义 pdf.js

Customizing pdf.js

提问by mesx

i would like to use pdf.js in my webApplication and customize it's view, so i can embedd it into the rest of my application (i was thinking about using an iframe).

我想在我的 webApplication 中使用 pdf.js 并自定义它的视图，所以我可以将它嵌入到我的应用程序的其余部分中（我正在考虑使用 iframe）。

At first i would like to get rid of most of the default toolbar-buttons like "print" or "download file" but keep the zoom and page navigation. Instead, i want these features (print/download) to appear inside my application's toolbar. How to do that? How can i hide the print/download buttons from the pdf.js toolbar and call this features with my custom buttons which are rendered inside my webapplication already?

起初，我想摆脱大多数默认工具栏按钮，如“打印”或“下载文件”，但保留缩放和页面导航。相反，我希望这些功能（打印/下载）出现在我的应用程序工具栏中。怎么做？如何从 pdf.js 工具栏中隐藏打印/下载按钮，并使用已在我的 Web 应用程序中呈现的自定义按钮调用此功能？

Or should i use another library other than pdf.js?

还是我应该使用 pdf.js 以外的其他库？

Any information are very helpful!!

任何信息都非常有帮助！！

回答by mesx

Ok, i found how to do it. To hide a button simply add the CSS class "hidden" to it like "toolbarButton download hiddenMediumView hidden". To download the file, just call "PDFViewerApplication.download();". To print it, use window.print().

好的，我找到了方法。要隐藏按钮，只需向其添加 CSS 类“hidden”，例如“toolbarButton download hiddenMediumView hidden”。要下载文件，只需调用“PDFViewerApplication.download();”。要打印它，请使用 window.print()。

All the handlers are listet in the view.js file. Just search for "// Event handling functions.". In my version it's on line 1840.

所有的处理程序都列在 view.js 文件中。只需搜索“// 事件处理函数。”。在我的版本中，它位于 1840 行。

I guess that's the simplest way. Of cours buttons could be removed completely from the DOM but that would mean to also alter the view.js file.

我想这是最简单的方法。当然，按钮可以从 DOM 中完全删除，但这意味着也要更改 view.js 文件。

回答by arvin_v_s

you can also build your own pdf viewer.You need to add a canvas element in your document.See the sample code below.you can add simple buttons or screen swipes to navigate to next pages or reload with page with a different scale. Initially its set to fit the screen width. Also see examples from pdf.js github. Sample code:

您还可以构建自己的 pdf 查看器。您需要在文档中添加画布元素。请参阅下面的示例代码。您可以添加简单的按钮或屏幕滑动以导航到下一页或重新加载具有不同比例的页面。最初将其设置为适合屏幕宽度。另请参阅pdf.js github 中的示例。示例代码：

    function initializePsfJS() {
    pdfDoc = null;
    pageNum = 1;
    pageRendering = false;
    pageNumPending = null;
    scale = 1;
    canvas = document.getElementById('the-canvas');
    ctx = canvas.getContext('2d');
    viewport = null;
    PDFJS.workerSrc = './js/pdf.worker.js';
}

/**
 * Get page info from document, resize canvas accordingly, and render page.
 * @param num Page number.
 */
function renderPage(num) {
    pageRendering = true;
    // Using promise to fetch the page
    pdfDoc.getPage(num).then(function (page) {
        if (scale === "fit") {
            var unscaledViewport = page.getViewport(1);
            var viewerCont = document.getElementById('viewerDiv');
            var bdrec = viewerCont.getBoundingClientRect();
            scale = Math.min((bdrec.height / unscaledViewport.height), (bdrec.width / unscaledViewport.width));
        }
        viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        canvas.width = viewport.width;

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

        // Wait for rendering to finish
        renderTask.promise.then(function () {
            pageRendering = false;
            if (pageNumPending !== null) {
                // New page rendering is pending
                renderPage(pageNumPending);
                pageNumPending = null;
            }
            calculateinitialXY();
        });
    });
}

/**
 * If another page rendering in progress, waits until the rendering is
 * finised. Otherwise, executes rendering immediately.
 */
function queueRenderPage(num) {
    if (pageRendering) {
        pageNumPending = num;
    } else {
        renderPage(num);
    }
}

function getDocumentByXMLHttpRequest() {
    //reason for this
    //http://stackoverflow.com/questions/36199155/pdf-file-generated-by-post-request-not-opening
    var header = getHeader();
    var requesturl =  < url rest service url to fetch document >
        var xhr = new XMLHttpRequest();
    xhr.open('GET', requesturl);
    xhr.setRequestHeader(header.key, header.value);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function () {
        if (this.status == 200) {
            onloadDocumentFromContent(this.response);
        } else {
            navigator.notification.alert('Error while requesting pdf with id ' + getDocumentId());

        }
    };
    xhr.send();
}
function onloadDocumentFromContent(pdfraw) {

    var docInitParams = {
        data : pdfraw
    };

    PDFJS.getDocument(docInitParams).then(function (pdfDoc_) {
        pdfDoc = pdfDoc_;

        // Initial/first page rendering

        renderPage(pageNum);
    });

}