pdfjs报错 Cannot read properties of undefined (reading 'getDocument')

你好！对于报错 "Cannot read properties of undefined (reading 'getDocument')"，通常是因为没有正确引入或加载 PDF.js 库。请确保你已经正确地引入了所需的库文件，并且可以访问到 `getDocument` 方法。

以下是一些常见的解决方法：

1. 确保你已经正确地引入了 PDF.js 库。你可以通过以下方式之一来引入库文件：

- 使用 `<script>` 标签引入库文件：

相关问题

上述代码报错 Cannot read properties of undefined (reading 'getDocument')

抱歉，我之前的代码有一处错误。在Vue组件中，应该将pdfjsLib作为Vue的全局变量使用。请尝试以下修改后的代码：

<template>
  <div>
    <div ref="pdfContainer"></div>
    <button @click="saveAnnotations">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pdfDocument: null,
      pdfViewer: null,
      annotations: []
    }
  },
  mounted() {
    this.loadPDF()
  },
  methods: {
    loadPDF() {
      const container = this.$refs.pdfContainer

      // 加载PDF
      window.pdfjsLib.getDocument('/path/to/pdf/file.pdf').promise.then(pdf => {
        this.pdfDocument = pdf
        this.renderPDF(container)
      })
    },
    renderPDF(container) {
      const viewer = document.createElement('div')
      container.appendChild(viewer)

      // 创建PDFViewer实例
      this.pdfViewer = new window.pdfjsLib.PDFViewer({
        container: viewer
      })

      // 渲染PDF
      this.pdfViewer.setDocument(this.pdfDocument)

      // 监听文本选择事件
      this.pdfViewer.viewer.addEventListener('textlayerrendered', e => {
        const textLayer = e.detail.textLayer

        // 移除之前的标记
        this.clearAnnotations()

        // 获取当前选择的文本范围
        const sel = window.getSelection()
        const range = sel.getRangeAt(0)
        const startNode = range.startContainer.parentNode
        const endNode = range.endContainer.parentNode
        const startOffset = range.startOffset
        const endOffset = range.endOffset

        // 遍历文本层，找到选择范围内的文本并添加标记
        const textElements = textLayer.textLayerDiv.getElementsByClassName('textLayerText')
        for (let i = 0; i < textElements.length; i++) {
          const element = textElements[i]
          const textContent = element.textContent

          if (element === startNode && element === endNode) {
            const markedText = document.createElement('mark')
            markedText.style.backgroundColor = 'yellow'
            markedText.textContent = textContent.substring(startOffset, endOffset)
            element.replaceChild(markedText, element.childNodes[0])
            this.annotations.push({
              page: this.pdfViewer.currentPageNumber,
              markedText: markedText.textContent
            })
          } else if (element === startNode) {
            const markedText = document.createElement('mark')
            markedText.style.backgroundColor = 'yellow'
            markedText.textContent = textContent.substring(startOffset)
            element.replaceChild(markedText, element.childNodes[0])
            this.annotations.push({
              page: this.pdfViewer.currentPageNumber,
              markedText: markedText.textContent
            })
          } else if (element === endNode) {
            const markedText = document.createElement('mark')
            markedText.style.backgroundColor = 'yellow'
            markedText.textContent = textContent.substring(0, endOffset)
            element.replaceChild(markedText, element.childNodes[0])
            this.annotations.push({
              page: this.pdfViewer.currentPageNumber,
              markedText: markedText.textContent
            })
          } else if (element !== startNode && element !== endNode) {
            const markedText = document.createElement('mark')
            markedText.style.backgroundColor = 'yellow'
            markedText.textContent = textContent
            element.replaceChild(markedText, element.childNodes[0])
            this.annotations.push({
              page: this.pdfViewer.currentPageNumber,
              markedText: markedText.textContent
            })
          }
        }
      })
    },
    clearAnnotations() {
      const marks = document.getElementsByTagName('mark')
      while (marks.length > 0) {
        const mark = marks[0]
        mark.outerHTML = mark.innerHTML
      }
      this.annotations = []
    },
    saveAnnotations() {
      // 将标记信息保存到数据库或服务器
      console.log(this.annotations)
    }
  }
}
</script>

这次代码中，我们将`pdfjsLib`作为Vue组件内部的全局变量`window.pdfjsLib`来使用，保证了能够正确访问`getDocument`方法。

请记得将`/path/to/pdf/file.pdf`替换为实际的PDF文件路径。

如果还有任何问题，请随时提问。

pdfjs-dist Cannot read properties of undefined (reading 'getDocument')

这个错误通常是由于pdfjs-dist版本不兼容或者未正确安装所导致的。建议您按照引用中的建议，尽量安装2.0的版本，如 npm install pdfjs-dist@2.16.105 --save，以避免出现pdf不显示的问题。如果您已经安装了2.0版本，但仍然出现此错误，可能是您的代码中存在其他问题。您可以检查代码中是否正确引入了pdfjs-dist，并且是否正确调用了getDocument方法。如果问题仍然存在，您可以尝试在pdfjs-dist的GitHub页面上查找解决方案或者提出问题。