将 PDFObject 与 PDF.js 一起使用时隐藏打印按钮答案

【问题标题】：Hide print button when using PDFObject with PDF.js将 PDFObject 与 PDF.js 一起使用时隐藏打印按钮
【发布时间】：2016-10-22 05:00:16
【问题描述】：

在使用 pdf.js 渲染文件时，我正在尝试打印按钮和其他按钮。我尝试使用 CSS，它适用于 Chrome，但不适用于 Internet Explorer。对于 Internet Explorer，我使用了 javascript。当我加载一个文件但后续文件仍然显示按钮时，JS 可以工作。

viewer.html

<script type="text/javascript">
    $(function () {

        $('#print').hide();
        $('#viewBookmark').hide();
        $('#openFile').hide();
    });
</script>

viewer.css

button#openFile, button#print, a#viewBookmark {
        display: none;
    }

default.cshtml

$('.file').on('click touchend', function (e) {
        e.preventDefault();
        if ($(this).hasClass('disabled'))
            return;
        var path = $(this).data('path').replace("\\\\", "http://").replace("@pdfFolder", "Uploads");
        var name = $(this).data('name');
        var lastname = $(this).data('lastname');
        name = name.length > 8 ?
            name.substring(0, 5) + '...' :
            name.substring(0, 8);
        lastname = lastname.length > 8 ?
            lastname.substring(0, 5) + '...' :
            lastname.substring(0, 8);
        var tabCount = $('#tabs li').size();
        var uuid = guid();
        $(this).attr('data-position', uuid);
        $('#content').css('display', 'block');
        if (tabCount === 5) {
            $('#maximumTabsModal').modal('show');
        } else {
            $(this).addClass('disabled')
            $('<li role="presentation" data-position="' + uuid + '"><a href="#panel' + uuid + '" aria-controls="panel"' + uuid + ' role="tab" data-toggle="tab">' + name + '<span class="close"></span><br/>' + lastname + '</a></li>').appendTo('#tabs');
            $('<div class="tab-pane" id="panel' + uuid + '"><div id="pdf' + uuid + '" class="pdf"></div></div>').appendTo('.tab-content');
            $('#tabs a:last').tab('show');
            var options = {
                //pdfOpenParams: {
                //    view: "FitV"
                //},
                forcePDFJS: true,
                PDFJS_URL: "pdfjs/web/viewer.html"
            };
            var pdf = PDFObject.embed(path, '#pdf' + uuid, options);
            $('#print').hide();
            $('#viewBookmark').hide();
            $('#openFile').hide();
            $('#exd-logo').hide();
        }
    });

【问题讨论】：

标签： javascript jquery css pdf.js pdfobject

【解决方案1】：

Have you tried using print media queries ?

【讨论】：

【解决方案2】：

很遗憾，PDFObject 不能隐藏打印按钮，它只提供了一种指定 PDF 打开参数的机制，不包括隐藏打印按钮的能力。

我不是 PDF.js 方面的专家，但由于它全部基于 JS，并且托管在您的域中（即您拥有完整的脚本访问权限），您应该能够找到一种方法来破解它以删除打印按钮。祝你好运！

【讨论】：

【解决方案3】：

我能够通过处理 PDF.js 提供的 pagerendered 事件来隐藏按钮。

viewer.html

<script type="text/javascript">
    $(function () {
        document.addEventListener("pagerendered", function (e) {
            $('#print').hide();
            $('#viewBookmark').hide();
            $('#openFile').hide();
        });
    });
</script>

【讨论】：

很高兴为您工作。通常，当我处理具有不同页面加载时间的组件时，或者在您的情况下，是一个完全动态的渲染，我求助于 JavaScript setInterval() 方法。这个想法是您无限期地扫描页面以查找#print 按钮。如果是:visible，那么.hide()。最后，如果原始 CSS 在 Chrome 中工作，我会尝试在 DOM 树中更精确以使其在 IE 中工作。例如，在打印按钮之前声明其所有父级。取而代之的是#print，尝试 parent parent div#print，其中 parent 将是实际的元素名称。
@AlexanderDixon 它实际上间歇性地工作。它隐藏在某些选项卡中，但偶尔会显示在其他选项卡中，仅在 IE 中。我不得不解决从html中删除元素

【解决方案4】：

我在这里在黑暗中拍摄，因为我不知道 PDF 查看器是否在 <iframe> 中加载，但以下代码将无限期地扫描页面并禁止显示打印按钮是否找到它。

    var $printSearch = setInterval(function() {
      if ($('#print').length > 0 || $('#print').is(':visible')) {
        hidePrint();
      } else {
        //doNothing
        console.log('Searching...');
      }
    }, 150);

    function hidePrint() {
      $('div#print').css('display', 'none');
    }

如果它确实加载到 iframe 中，我们可以使用 .contents() 和 .filter() jQuery 方法来定位那些难以捉摸的按钮。

【讨论】：