vue3 pdfjs-dist

在Vue3中使用pdfjs-dist是为了查看PDF文档。首先，需要安装pdfjs-dist依赖，可以通过运行npm i pdfjs-dist命令进行安装。然后，在Vue3中使用pdfjs-dist的基本页面代码如下：

<template>
  <div class="pdf-container">
    <canvas id="pdf-canvas"></canvas>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js'
import Pdf from '@/assets/js.pdf'

@Options({})
export default class SinglePage extends Vue {
  loadFile(url: string): void {
    PdfJs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')
    const loadingTask = PdfJs.getDocument(url)
    loadingTask.promise.then((pdf) => {
      this.pdfDoc = pdf
      this.pdfPages = this.pdfDoc.numPages
      this.$nextTick(() => {
        this.renderPage(1)
      })
    })
  }
}
</script>

在上述代码中，loadFile()方法用于加载PDF文件，并渲染到canvas上。需要注意的是，加载PDF文件前需要设定pdfjs的workerSrc参数，否则可能会出现workerSrc未定义的错误。通过loadingTask.promise可以获取加载的PDF文件流，并保存到pdfDoc变量中，同时获取PDF文件的总页数。最后，调用renderPage()方法将PDF文件内容渲染到canvas上。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [超详细的vue3使用pdfjs教程](https://blog.csdn.net/CherishTheYouth/article/details/119619608)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]