PDF.js 定制化 viewer.html 处理

之前介绍了前端 pdf 在线预览的几种方式，其中 PDF.js 中的 viewer.html 是可以自定义的。这篇文章就介绍了 viewer.html 是如何自定义的，例如多语言，工具条，自定义按钮等等

1. 多语言化处理

在 public/web/viewer.html 中有一个语言配置

直接改成中文locale/zh-CN/viewer.properties

其他语言的文件就可以删除了，没必要

因为目前项目是不用考虑多语言的

js 复制代码

// 更改前
<link rel="resource" type="application/l10n" href="locale/locale.properties" />

// 更改后，直接用中文
<link
  rel="resource"
  type="application/l10n"
  href="locale/zh-CN/viewer.properties"
/>

2. 移除文本、绘图、添加或编辑图像功能

如图所示，右上角功能分别为"文本"、"绘图"、"添加或编辑图像"功能

先在locale/zh-CN/viewer.properties找到对应的文件标签的中文对应

然后在 viewer.html 中根据标签名全局找到对应的元素按钮。

如下所示：

editor_free_text2_label=文本 -> id="editorFreeText"
editor_ink2_label=绘图 -> id="editorInk"
editor_stamp1_label=添加或编辑图像 -> id="editorStamp"

注意：不能直接删掉对应元素或者注释掉，会影响其他元素的展示，导致整体功能异常。

我使用了比较简单粗暴的方式，直接设置属性display: none

当然也可以改 viewer.js 代码实现，前提是要熟悉代码

实现方式肯定不止一种

3. 工具按钮功能自定义

按照上面同样的方式找到"工具"按钮对应的位置id="secondaryToolbarToggle"

这里面有很多功能，但是项目中只想保留"打印"和"保存"功能。

打印：id="secondaryPrint"
保存：id="secondaryDownload"

要去掉其他功能，直接设置属性display: none就太麻烦了，要一个一个处理，太多了。

最终解决方法：隐藏整体"工具"按钮，将"打印"和"保存"功能移动到之前的"文本、绘图"那块。

html 复制代码

<!-- 隐藏工具按钮：也是设置style="display: none" -->
<button
  id="secondaryToolbarToggle"
  tabindex="48"
  data-l10n-id="tools"
  aria-expanded="false"
  aria-controls="secondaryToolbar"
  style="display: none"
>
  <span data-l10n-id="tools_label">Tools</span>
</button>
<!-- 新增下载按钮：直接拷过来的，之前的代码需要删注释 -->
<!-- 不然会有两个id="secondaryDownload"的元素 -->
<button
  id="secondaryDownload"
  class="secondaryToolbarButton visibleMediumView"
  title="Save"
  tabindex="53"
  data-l10n-id="save"
>
  <span data-l10n-id="save_label">Save</span>
</button>

当然也可以不用将之前的按钮拷贝过来，直接自己写一个"下载"按钮事件即可。

js 复制代码

function handleDownload(o) {
  const a = document.createElement("a");
  // pdfPath = "合卷5-6.pdf"
  a.href = "../pdf/" + curMenu.pdfPath;
  a.download = curMenu.pdfPath;
  document.body.appendChild(a);
  a.target = "_blank";
  a.click();
  a.remove();
}

"下载"按钮事件表现形式：

在谷歌浏览器中，直接下载了，默认下载到定义的文件夹中了，没有提示
在 electron 中，会弹出一个下载框，用户可以更改下载的文件名和存储地址，如图所示：

4. 冗余代码删除

最后，根据需要的功能，在不影响功能的前提下，删除其他冗余代码。

删除后，仅剩的代码如下所示：