vue使用vue-pdf 预览文件

以下是使用Vue和vue-pdf实现文件预览的示例代码：

<template>
  <div>
    <pdf :src="pdfUrl" :page="currentPage" :rotation="rotation" :scale="scale"></pdf>
    <button @click="previousPage">上一页</button>
    <button @click="nextPage">下一页</button>
    <button @click="rotate">旋转</button>
    <button @click="zoomIn">放大</button>
    <button @click="zoomOut">缩小</button>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfUrl: 'path/to/your/pdf/file.pdf',
      currentPage: 1,
      rotation: 0,
      scale: 1
    }
  },
  methods: {
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },
    nextPage() {
      // 获取pdf总页数，假设为totalPages
      const totalPages = 10
      if (this.currentPage < totalPages) {
        this.currentPage++
      }
    },
    rotate() {
      this.rotation += 90
    },
    zoomIn() {
      this.scale += 0.1
    },
    zoomOut() {
      if (this.scale > 0.1) {
        this.scale -= 0.1
      }
    }
  }
}
</script>

请注意，上述代码中的`pdfUrl`需要替换为你实际的PDF文件路径。此外，你还可以根据需要调整其他参数，如当前页码、旋转角度和缩放比例。