vue-pdf 显示全部

Vue-pdf 是一个用于在 Vue.js 应用程序中显示 PDF 文件的库。使用 vue-pdf，你可以将 PDF 文件嵌入到你的应用程序中，并提供一些功能，如缩放、滚动等。

要在 Vue.js 中使用 vue-pdf，首先需要安装它。你可以通过运行以下命令来安装 vue-pdf：

npm install vue-pdf

安装完成后，在你的 Vue 组件中引入 vue-pdf，并在模板中使用它。以下是一个简单的示例：

<template>
  <div>
    <pdf :src="pdfUrl" :page="pageNumber" @num-pages="numPages = $event"></pdf>
    <div>共 {{ numPages }} 页</div>
    <button @click="prevPage">上一页</button>
    <button @click="nextPage">下一页</button>
  </div>
</template>

<script>
import { pdf } from 'vue-pdf';

export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfUrl: '/path/to/your/pdf/file.pdf',
      pageNumber: 1,
      numPages: null
    };
  },
  methods: {
    prevPage() {
      if (this.pageNumber > 1) {
        this.pageNumber--;
      }
    },
    nextPage() {
      if (this.pageNumber < this.numPages) {
        this.pageNumber++;
      }
    }
  }
};
</script>

在上面的示例中，我们通过使用 `<pdf>` 标签并传递 `src` 属性来显示 PDF 文件。`page` 属性用于设置当前显示的页码，而 `num-pages` 事件用于获取总页数并将其存储在 `numPages` 变量中。

通过点击上一页和下一页按钮，你可以更改当前显示的页码。请确保将 `pdfUrl` 替换为你自己的 PDF 文件路径。

这只是一个基本的示例，你可以根据需要进行自定义和扩展。你可以查阅 vue-pdf 的文档以获得更多详细信息和其他功能。希望对你有所帮助！