vue-pdf使用及注意事项

vue-pdf 是一个用于在 Vue 应用中显示 PDF 文件的库。以下是如何使用 vue-pdf 并注意一些关键点的示例：

1. 安装 vue-pdf：

npm install vue-pdf

2. 在 Vue 组件中引入并使用 vue-pdf：

<template>
  <div>
    <pdf
      :src="pdfSrc"
      v-for="pageNumber in numPages"
      :key="pageNumber"
      :page="pageNumber"
      @num-pages="numPages = $event"
    ></pdf>
  </div>
</template>
 
<script>
import pdf from 'vue-pdf'
 
export default {
  components: {
    pdf
  },
  data() {
    return {
      numPages: 0,
      pdfSrc: 'path/to/your/pdf/file.pdf'
    }
  }
}
</script>

在这个例子中，我们创建了一个名为 pdf 的组件，并通过 v-for 指令来循环渲染每一页。:src 绑定了 PDF 文件的路径，@num-pages 监听了 PDF 文件加载完成后的总页数，并将其赋值给 numPages 数据属性。

注意事项：

• 确保 PDF 文件的路径正确无误。
• 如果 PDF 文件位于远程服务器上，请确保服务器支持跨源资源共享 (CORS)。
• 可以通过样式调整 pdf 组件的显示方式，如改变尺寸、边距等。
• 如果需要实现搜索、书签等功能，可能需要额外的逻辑来处理，因为 vue-pdf 组件本身不提供这些功能。