vue 预览pdf文件

Vue中预览PDF文件可以通过`vue-pdf`库来实现。以下是如何在Vue组件中操作的步骤：

1. **在模板中引入PDF元素**[^1]:

<template>
  <div class="scrollBox">
    <pdf
      v-for="item in numPages"
      :key="item"
      :src="pdfSrc"
      :page="item"
      ref="pdf"
    ></pdf>
  </div>
</template>

这会遍历`numPages`数组中的每个页面，显示相应的PDF页面。

2. **设置数据和业务逻辑**:

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfSrc: "http://image.cache.timepack.cn/nodejs.pdf",
      numPages: null, // 初始化为空，待加载完成后再赋值
    }
  },
  mounted() {
    this.getNumPages()
  },
  methods: {
    // 获取PDF总页数的方法
    getNumPages() {
      const loadingTask = pdf.createLoadingTask(this.pdfSrc)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
      }).catch(err => {
        console.error('pdf 加载失败', err);
      })
    },
  },
}
</script>

在`mounted`生命周期钩子里调用`getNumPages`方法，它创建一个loading任务并获取PDF的总页数。如果加载成功，`numPages`就会被设置为PDF的实际页数。