自定義 pdf.js

Question

我想在我的 webApplication 中使用 pdf.js 並自定義它的視圖，所以我可以將它嵌入到我的應用程序的其余部分中（我正在考慮使用 iframe）。

起初，我想擺脫大多數默認工具欄按鈕，如“打印”或“下載文件”，但保留縮放和頁面導航。 相反，我希望這些功能（打印/下載）出現在我的應用程序工具欄中。 怎么做？ 如何從 pdf.js 工具欄中隱藏打印/下載按鈕，並使用已在我的 web 應用程序中呈現的自定義按鈕調用此功能？

還是我應該使用 pdf.js 以外的其他庫？

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

Answer 1

好的，我找到了怎么做。 要隱藏按鈕，只需向其添加 CSS 類“hidden”，例如“toolbarButton download hiddenMediumView hidden”。 要下載文件，只需調用“PDFViewerApplication.download();”。 要打印它，請使用 window.print()。

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

我想這是最簡單的方法。 當然，按鈕可以從 DOM 中完全刪除，但這意味着也要更改 view.js 文件。

Answer 2

您還可以構建自己的 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);
    });

}

Answer 3

如果您使用的是 pdfjs 網絡版本，並且您想隱藏打印按鈕，例如，您可以執行以下操作：

 <iframe
        src={`/pdfjs/web/viewer.html?file=${pdfFile}`}
        onLoad={(e) => {
               Array.from(e.target.contentDocument
                    .getElementsByClassName('print'))
                    .forEach((i) => { i.classList.add('hidden'); });
                }}
            >
 </iframe>

您需要將樣式添加到 iframe 呈現的新 HTML 中，默認情況下，瀏覽器不會將主應用程序中的樣式應用到 iframe 呈現的應用程序。

另一個例子可能是添加簡單的顏色變化：

 <iframe id='iframe_pdfjs'
    src={`/pdfjs/web/viewer.html?file=${pdfFile}`}
    onLoad={(e) => {
           const cssStyle = document.createElement('style');
           cssStyle.innerHTML = 'div {color: red;}';
    document.getElementsById('iframe_pdfjs').contentDocument.head.appendChild(cssStyle)
        ></iframe>

在上面的例子中，我們只是向 iframe 渲染的 HTML 添加樣式標簽