使用PDF.js open方法打开新文件后事件监听器丢失问题

环境与引入方式 #

<link rel="resource" type="application/l10n" href="/locale/locale.json">
<script src="build/pdf.js" type="module"></script>
<link rel="stylesheet" href="/viewer.css">

页面删除操作流程 #

通过以下步骤实现PDF指定页面删除：

• 从PDF Viewer读取文件并转为Base64格式

async function ReadPDFFromViewer() {
  var pdfFileBytes = await PDFViewerApplication.pdfDocument.saveDocument();
  var b64encoded = _arrayBufferToBase64(pdfFileBytes);
  return b64encoded;
}
function _arrayBufferToBase64(buffer) {
  var binary = '';
  var bytes = new Uint8Array(buffer);
  var len = bytes.byteLength;
  for (var i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return window.btoa(binary);
}

• 借助pdf-lib加载文件并删除目标页面

var currentFilePDFBase64 = await ReadPDFFromViewer();
let pdfDoc = await PDFLib.PDFDocument.load(currentFilePDFBase64);
pdfDoc.removePage(currentPage)
var pdfBytes = await pdfDoc.save();

• 将编辑后的PDF重新载入Viewer

PDFViewerApplication.open({ data: pdfBytes });
PDFViewerApplication.pdfViewer.refresh(false, "");

问题描述 #

上述步骤执行正常，但重新打开编辑后的PDF后，Viewer的Open功能失效：点击Open选择新文件后，Viewer无任何内容显示。

排查发现：执行编辑重开操作后，viewer.js中创建的fileInput元素的change监听器不再触发，即使手动重新添加监听器，仍无法加载新文件。

可行解决方案 #

1. 先清理现有文档状态再打开新文件
   调用open前先关闭当前文档，避免状态污染：

await PDFViewerApplication.close();
await PDFViewerApplication.open({ data: pdfBytes });

2. 重置文件选择器的事件绑定
   重新获取fileInput元素并绑定事件（需匹配viewer.js中实际的元素ID和事件处理函数）：

const fileInput = document.getElementById('fileInput');
fileInput.removeEventListener('change', PDFViewerApplication.openFile);
fileInput.addEventListener('change', PDFViewerApplication.openFile);

3. 确保传入正确格式的文档数据
   将pdfBytes转为ArrayBuffer后再传入open方法：

const arrayBuffer = new Uint8Array(pdfBytes).buffer;
PDFViewerApplication.open({ data: arrayBuffer });

内容的提问来源于stack exchange，提问作者Developer