使用PDF.js+Alpine.js展示多页PDF时遇私有字段读取错误求助

错误原因 #

你遇到的Uncaught (in promise) TypeError: Cannot read from private field，是因为PDF.js的Document实例包含私有字段，而Alpine.js会对组件返回对象中的属性做响应式代理。代理后的对象访问私有字段时，会触发JS的私有字段访问校验（私有字段仅允许原始类实例访问），导致报错。

正确实现方式 #

把PDF.js的实例存储在Alpine组件函数的局部变量中（不要放在返回的响应式对象里），这样就能避开代理干扰，同时实现实例复用，避免重复加载的性能问题：

<div x-data="pdfModalComponent()">
  <!-- 模态框结构 -->
  <div x-show="isOpen" class="modal">
    <div class="pdf-controls">
      <button @click="goToPrevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} / {{ totalPages }} 页</span>
      <button @click="goToNextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
    <canvas id="pdf-render-canvas"></canvas>
    <button @click="closeModal">关闭</button>
  </div>
</div>

<script>
function pdfModalComponent() {
  // 非响应式局部变量：存储PDF实例和缓存URL，不被Alpine代理
  let pdfDocumentInstance = null;
  let cachedPdfUrl = '';
  
  // DOM元素和上下文
  const canvas = document.getElementById('pdf-render-canvas');
  const canvasCtx = canvas.getContext('2d');

  return {
    isOpen: false,
    currentPage: 1,
    totalPages: 0,

    async openModal(pdfUrl) {
      // 仅当URL变化或实例未初始化时，重新加载PDF
      if (pdfUrl !== cachedPdfUrl || !pdfDocumentInstance) {
        pdfDocumentInstance = await pdfjsLib.getDocument(pdfUrl).promise;
        cachedPdfUrl = pdfUrl;
        this.totalPages = pdfDocumentInstance.numPages;
        this.currentPage = 1;
      }

      await this.renderCurrentPage();
      this.isOpen = true;
    },

    closeModal() {
      this.isOpen = false;
    },

    async renderCurrentPage() {
      const page = await pdfDocumentInstance.getPage(this.currentPage);
      const viewport = page.getViewport({ scale: 1.5 });

      // 设置画布尺寸
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      // 渲染页面
      await page.render({
        canvasContext: canvasCtx,
        viewport: viewport
      }).promise;
    },

    async goToPrevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        await this.renderCurrentPage();
      }
    },

    async goToNextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        await this.renderCurrentPage();
      }
    }
  };
}
</script>

关键细节 #

• 实例存储位置：pdfDocumentInstance是组件函数的局部变量，不会被Alpine的响应式代理处理，因此能正常访问PDF.js实例的私有字段。
• 复用逻辑：通过cachedPdfUrl缓存当前加载的PDF地址，只有打开新PDF或实例未初始化时才重新加载，避免重复请求和实例化的性能开销。
• 页面切换：直接复用已有的PDF实例调用getPage，渲染逻辑仅针对当前页面，性能损耗极低。

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