一、PDF.js项目介绍及下载

PDF.js 是一个使用 HTML5 构建的便携式文档格式查看器。项目是由社区驱动的，并由 Mozilla 支持。目标是为解析和呈现 PDF 创建一个通用的、基于 Web 标准的平台。

官网：https://mozilla.github.io/pdf.js/

项目地址：https://github.com/mozilla/pdf.js

pdf.js 托管在几个 CDN 上:

https://www.jsdelivr.com/package/npm/pdfjs-dist
https://cdnjs.com/libraries/pdf.js
https://unpkg.com/pdfjs-dist/

比较好用的几个版本：1.9.426  2.16.105   3.9.179

二、如何去掉下载和打印按钮

PDF.js是一款实用的pdf开源阅读器，其中的下载和打印按钮可以通过修改Viewer.js文件中的代码去除，或者通过CSS隐藏这些按钮。具体步骤包括修改源码、使用CSS样式隐藏按钮、。下面具体介绍如何通过这些方法去掉PDF.js的下载和打印按钮。

一、修改源码去除按钮

PDF.js中控制下载和打印功能的按钮在界面上是由HTML代码结合Javascript来实现的。要去除这些按钮，需要修改web/viewer.html文件和web/viewer.js文件。

首先，打开web/viewer.html文件，找到代表下载和打印按钮的HTML元素。一般情况下，这些按钮的代码类似如下所示：

<button id="download" class="toolbarButton download hiddenMediumView" title="Download" tabindex="33" data-l10n-id="download">
  ...
</button>

<button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="32" data-l10n-id="print">
  ...
</button>

然后，将包含这些按钮的HTML代码段删除或者注释掉。

接下来，打开web/viewer.js文件，找到与下载和打印按钮相关的Javascript代码段，并将它们注释掉或删除。

通过以上步骤，按钮在代码层面就被移除了，不会在浏览器中显示。

二、使用CSS样式隐藏按钮

另一种方法是使用CSS样式来隐藏下载和打印按钮，而不直接修改源代码。这种方法的好处是可以在不触碰PDF.js源码的情况下实现按钮的隐藏。

在PDF.js的样式文件web/viewer.css中添加如下CSS规则：

#download {display: none !important;}
#print {display: none !important;}

或者在包含PDF.js viewer的页面中添加一个<style>标签，内含上述CSS内容：

<style>
  #download {
    display: none !important;
  }
  #print {
    display: none !important;
  }
</style>

使用CSS的方法将下载和打印按钮设为不可见，用户无法通过界面上的这些按钮来执行下载和打印操作。

三、使用Javascript 动态隐藏按钮

除了直接修改CSS，也可以在页面加载完毕后，通过Javascript动态地修改按钮的样式来隐藏按钮。

监听文档加载完成的事件，在事件处理函数中添加代码来隐藏按钮：

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('download').style.display = 'none';
  document.getElementById('print').style.display = 'none';
});

四、在自定义Viewer中移除按钮

如果你是通过构建自己的Viewer界面来嵌入PDF.js，你可以在创建你的Viewer的HTML结构时，不包括下载和打印按钮的代码。

在你的自定义viewer.html中，从一开始就不要包括下载和打印按钮的HTML代码。

以上方法可以帮助你根据需求去除PDF.js中下载和打印按钮。请根据你的具体情况选择最适合的方法。

相关问答FAQs：

如何禁用PDF.js中的下载和打印按钮？

在HTML文档中嵌入PDF.js插件后，你可以使用CSS来隐藏下载和打印按钮。使用以下代码可以禁用下载按钮：

.pdfjs-viewer .toolbar-button#download {
  display: none;
}

使用以下代码可以禁用打印按钮：

.pdfjs-viewer .toolbar-button#print {
  display: none;
}

如果你需要更加精细地控制按钮的显示和隐藏，你可以使用JavaScript来操作PDF.js插件。通过获取按钮元素并使用style.display属性进行设置，你可以动态地禁用下载和打印按钮：

var downloadButton = document.querySelector('.pdfjs-viewer .toolbar-button#download');
var printButton = document.querySelector('.pdfjs-viewer .toolbar-button#print');
downloadButton.style.display = 'none';
printButton.style.display = 'none';

上述代码将下载和打印按钮的display属性设置为none，从而使它们在页面中不可见。

另外一种禁用PDF.js中的下载和打印按钮的方法是什么？

除了使用CSS和JavaScript来禁用下载和打印按钮，你还可以直接修改PDF.js源代码来实现。在PDF.js的源文件中，你可以找到viewer.js文件，在这个文件中搜索download和print按钮的相关代码。通过注释掉或删除这些代码，你可以彻底禁用下载和打印按钮。

然而，直接修改PDF.js源代码可能会导致一些其它的问题，例如在升级PDF.js时可能会覆盖你的修改。因此，改变源代码应该是最后的选择，推荐使用CSS或JavaScript来控制按钮的显示和隐藏。

如何只禁用PDF.js中的下载按钮但保留打印按钮？

如果你只想禁用PDF.js中的下载按钮而保留打印按钮，可以使用以下代码：

.pdfjs-viewer .toolbar-button#download {
  display: none;
}

这样，下载按钮将被隐藏，而打印按钮将继续显示在PDF.js插件中。如果你不需要禁用打印按钮，可以忽略以上代码。