首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >自定义pdf.js

自定义pdf.js
EN

Stack Overflow用户
提问于 2015-07-28 01:15:30
回答 3查看 15.1K关注 0票数 2

我想在我的webApplication中使用pdf.js并定制它的视图,这样我就可以将它嵌入到我的应用程序的其余部分中(我正在考虑使用iframe)。

首先,我想摆脱大多数默认的工具栏按钮,如“打印”或“下载文件”,但保留缩放和页面导航。相反,我希望这些功能(打印/下载)出现在我的应用程序的工具栏中。如何做到这一点?如何隐藏pdf.js工具栏中的打印/下载按钮,并使用已在and应用程序中呈现的自定义按钮调用此功能?

或者我应该使用pdf.js之外的其他库?

任何信息都是非常有用的!

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-07-28 15:53:29

好了,我知道怎么做了。要隐藏按钮,只需添加“隐藏”的CSS类,如"toolbarButton download hiddenMediumView hidden“。要下载该文件,只需调用"PDFViewerApplication.download();“。要打印它,请使用window.print()。

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

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

票数 5
EN

Stack Overflow用户

发布于 2016-06-28 18:26:34

你也可以构建自己的pdf viewer.You,需要在你的document.See中添加一个画布元素,示例代码below.you可以添加简单的按钮或屏幕滑动来导航到下一页,或者重新加载具有不同比例的页面。最初,它设置为适合屏幕宽度。另请参阅pdf.js github中的示例。示例代码:

代码语言:javascript
运行
复制
    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);
    });

}
票数 5
EN

Stack Overflow用户

发布于 2021-02-02 04:18:57

例如,如果你使用的是pdfjs web版,并且你想隐藏打印按钮,你可以这样做:

代码语言:javascript
运行
复制
 <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呈现的应用程序。

另一个示例可能是添加简单的颜色更改:

代码语言:javascript
运行
复制
 <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中

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31659280

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档