vue项目中使用vue-pdf或pdf.Js，实现在页面上预览pdf内容

要在Vue项目中使用vue-pdf或pdf.js来预览PDF内容，你需要先安装这些库。

使用vue-pdf:

1. 安装vue-pdf:

npm install vue-pdf

2. 在Vue组件中使用vue-pdf:

<template>
  <div>
    <pdf
      :src="pdfSrc"
    ></pdf>
  </div>
</template>
 
<script>
import pdf from 'vue-pdf'
 
export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfSrc: 'path/to/your/pdf/file.pdf'
    }
  }
}
</script>

使用pdf.js:

1. 安装pdf.js:

npm install pdfjs-dist

2. 在Vue组件中使用pdf.js:

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>
 
<script>
import { getDocument } from 'pdfjs-dist/webpack'
 
export default {
  props: {
    src: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.loadPdf()
  },
  methods: {
    async loadPdf() {
      const loadingTask = getDocument(this.src)
      const pdf = await loadingTask.promise
      const page = await pdf.getPage(1)
      const viewport = page.getViewport({ scale: 1.0 })
      const canvas = this.$refs.pdfCanvas
      const context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }
      await page.render(renderContext).promise
    }
  }
}
</script>

在这两种方法中，你需要将pdfSrc或src属性指向你的PDF文件。vue-pdf是一个更高级的封装，它提供了一个更简单的方式来集成PDF预览功能。而pdf.js则提供了更多的控制和定制选项。根据你的需求选择合适的库。