详解如何使用Vue-PDF在应用中嵌入PDF文档

npm install vue-pdf
# 或者
yarn add vue-pdf

<template>
  <div>
    <vue-pdf :src="pdfUrl" />
  </div>
</template>
<script>
import { VuePdf } from 'vue-pdf'
export default {
  components: {
    VuePdf
  },
  data() {
    return {
      pdfUrl: 'https://example.com/my-document.pdf'
    }
  }
}
</script>

<template>
  <div>
    <button @click="prevPage">Previous Page</button>
    <button @click="nextPage">Next Page</button>
    <vue-pdf :src="pdfUrl" :page="currentPage" @num-pages="totalPages = $event" />
    <p>Page {{ currentPage }} of {{ totalPages }}</p>
  </div>
</template>
<script>
import { VuePdf } from 'vue-pdf'
export default {
  components: {
    VuePdf
  },
  data() {
    return {
      pdfUrl: 'https://example.com/my-document.pdf',
      currentPage: 1,
      totalPages: 0
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    }
  }
}
</script>

<template>
  <div>
    <button @click="zoomIn">Zoom In</button>
    <button @click="zoomOut">Zoom Out</button>
    <button @click="rotate">Rotate</button>
    <vue-pdf :src="pdfUrl" :scale="scale" :rotate="rotate" />
  </div>
</template>
<script>
import { VuePdf } from 'vue-pdf'
export default {
  components: {
    VuePdf
  },
  data() {
    return {
      pdfUrl: 'https://example.com/my-document.pdf',
      scale: 1,
      rotate: 0
    }
  },
  methods: {
    zoomIn() {
      this.scale += 0.1
    },
    zoomOut() {
      if (this.scale > 0.1) {
        this.scale -= 0.1
      }
    },
    rotate() {
      this.rotate = (this.rotate + 90) % 360
    }
  }
}
</script>