vue实现预览pdf

使用 vue-pdf 库实现 PDF 预览

安装 vue-pdf 库：

npm install vue-pdf

在组件中引入并使用：

<template>
  <pdf :src="pdfUrl"></pdf>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: '/path/to/document.pdf'
    }
  }
}
</script>

使用 PDF.js 实现自定义 PDF 预览

安装 pdfjs-dist：

npm install pdfjs-dist

实现基础预览功能：

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
    <button @click="prevPage">上一页</button>
    <button @click="nextPage">下一页</button>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist'

export default {
  data() {
    return {
      pdfDoc: null,
      pageNum: 1,
      pageRendering: false,
      pageNumPending: null,
      scale: 1.5
    }
  },
  mounted() {
    this.loadPDF('/path/to/document.pdf')
  },
  methods: {
    async loadPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url)
      this.pdfDoc = await loadingTask.promise
      this.renderPage(this.pageNum)
    },
    async renderPage(num) {
      this.pageRendering = true
      const page = await this.pdfDoc.getPage(num)
      const viewport = page.getViewport({ scale: this.scale })
      const canvas = this.$refs.pdfCanvas
      const context = canvas.getContext('2d')

      canvas.height = viewport.height
      canvas.width = viewport.width

      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }

      await page.render(renderContext).promise
      this.pageRendering = false
    },
    prevPage() {
      if (this.pageNum <= 1) return
      this.pageNum--
      this.renderPage(this.pageNum)
    },
    nextPage() {
      if (this.pageNum >= this.pdfDoc.numPages) return
      this.pageNum++
      this.renderPage(this.pageNum)
    }
  }
}
</script>

使用 iframe 嵌入 PDF 预览

简单实现方案：

<template>
  <iframe 
    src="/path/to/document.pdf" 
    width="100%" 
    height="600px"
    style="border: none;">
  </iframe>
</template>

使用 Mozilla 的 PDF Viewer

通过 object 标签实现：

<template>
  <object 
    data="/path/to/document.pdf" 
    type="application/pdf"
    width="100%" 
    height="600px">
    <p>您的浏览器不支持PDF预览，请<a :href="pdfUrl">下载PDF</a></p>
  </object>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: '/path/to/document.pdf'
    }
  }
}
</script>

实现 PDF 缩略图导航

扩展 PDF.js 实现缩略图：

<template>
  <div class="pdf-container">
    <div class="thumbnail-container">
      <div 
        v-for="page in totalPages" 
        :key="page"
        @click="goToPage(page)"
        class="thumbnail">
        <canvas :ref="`thumb${page}`"></canvas>
      </div>
    </div>
    <div class="main-view">
      <canvas ref="pdfCanvas"></canvas>
    </div>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist'

export default {
  data() {
    return {
      pdfDoc: null,
      totalPages: 0,
      currentPage: 1
    }
  },
  async mounted() {
    await this.loadPDF('/path/to/document.pdf')
    this.renderThumbnails()
  },
  methods: {
    async loadPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url)
      this.pdfDoc = await loadingTask.promise
      this.totalPages = this.pdfDoc.numPages
      this.renderPage(this.currentPage)
    },
    async renderPage(num) {
      const page = await this.pdfDoc.getPage(num)
      // ...渲染主视图逻辑
    },
    async renderThumbnails() {
      for (let i = 1; i <= this.totalPages; i++) {
        const page = await this.pdfDoc.getPage(i)
        const viewport = page.getViewport({ scale: 0.5 })
        const canvas = this.$refs[`thumb${i}`][0]
        const context = canvas.getContext('2d')

        canvas.height = viewport.height
        canvas.width = viewport.width

        await page.render({
          canvasContext: context,
          viewport: viewport
        }).promise
      }
    },
    goToPage(pageNum) {
      this.currentPage = pageNum
      this.renderPage(pageNum)
    }
  }
}
</script>

<style>
.pdf-container {
  display: flex;
}
.thumbnail-container {
  width: 20%;
}
.thumbnail {
  margin-bottom: 10px;
  cursor: pointer;
}
.main-view {
  width: 80%;
}
</style>