vue2使用vue-pdf-embed

vue-pdf-embed是一个Vue组件，用于在Vue应用程序中嵌入和显示PDF文件。它提供了一个简单的方式来展示PDF文件，并且支持一些常用的功能，比如缩放、翻页等。

要使用vue-pdf-embed，首先需要在你的Vue项目中安装该组件。可以通过npm或者yarn来进行安装，具体的安装命令如下：

npm install vue-pdf-embed

或者

yarn add vue-pdf-embed

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

<template>
  <div>
    <vue-pdf-embed :src="pdfUrl" :page="currentPage" :scale="scale"></vue-pdf-embed>
    <button @click="prevPage">上一页</button>
    <button @click="nextPage">下一页</button>
    <input type="range" v-model="scale" min="0.5" max="2" step="0.1">
  </div>
</template>

<script>
import VuePdfEmbed from 'vue-pdf-embed';

export default {
  components: {
    VuePdfEmbed,
  },
  data() {
    return {
      pdfUrl: 'path/to/your/pdf/file.pdf',
      currentPage: 1,
      scale: 1,
    };
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      // 在实际应用中，你可能需要根据PDF文件的总页数来判断是否到达最后一页
      this.currentPage++;
    },
  },
};
</script>

在上面的示例中，我们首先引入了vue-pdf-embed组件，并在模板中使用了它。通过设置`:src`属性来指定要显示的PDF文件的URL，`:page`属性来指定当前显示的页码，`:scale`属性来指定缩放比例。

同时，我们还添加了两个按钮和一个滑动条，用于切换页码和调整缩放比例。你可以根据实际需求进行修改和扩展。