vue2使用pdfjs

Vue.js 是一个流行的 JavaScript 前端框架，而 PDF.js 是一个开源的 JavaScript 库，用于在网页上显示 PDF 文件。如果你想在 Vue.js 中使用 PDF.js，你可以按照以下步骤进行操作：

1. 首先，安装 PDF.js 库。你可以通过 npm 或者 yarn 来安装。打开终端，进入你的 Vue.js 项目目录，并执行以下命令：

npm install pdfjs-dist

或者

yarn add pdfjs-dist

2. 在你的 Vue 组件中，导入 `pdfjs-dist` 库，并创建一个 PDF 查看器组件。你可以使用 `<canvas>` 标签来展示 PDF 文档。以下是一个简单的示例：

<template>
  <div>
    <canvas ref="pdfViewer"></canvas>
  </div>
</template>

<script>
import pdfjsLib from 'pdfjs-dist'

export default {
  mounted() {
    this.renderPDF()
  },
  methods: {
    async renderPDF() {
      const pdfPath = 'path_to_your_pdf.pdf'
      const canvas = this.$refs.pdfViewer

      const loadingTask = pdfjsLib.getDocument(pdfPath)
      const pdf = await loadingTask.promise
      const page = await pdf.getPage(1)
      const scale = 1.5
      const viewport = page.getViewport({ scale })
      const context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width

      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }
      await page.render(renderContext)
    }
  }
}
</script>

在上面的示例中，我们首先导入了 `pdfjs-dist` 库，并在 `mounted` 阶段调用 `renderPDF` 方法。在 `renderPDF` 方法中，我们加载 PDF 文档并获取第一页，然后根据页面大小创建一个相应大小的 `<canvas>` 元素，并将 PDF 页面渲染到该 canvas 上。

请确保将 `path_to_your_pdf.pdf` 替换为你要显示的 PDF 文件的实际路径。

这只是一个简单的示例，你可以根据你的需求进行更复杂的操作和样式调整。希望对你有所帮助！