当前位置：首页 > VUE

vue实现pdf预览

2026-01-15 04:37:35VUE

vue实现pdf预览的方法

使用pdf.js库

在Vue项目中集成Mozilla的pdf.js库可以高效实现PDF预览功能。该方案无需后端支持，纯前端实现。

安装依赖：

npm install pdfjs-dist

组件实现示例：

<template>
  <div>
    <canvas v-for="page in pages" :key="page" :id="'pdf-canvas-'+page"></canvas>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist'
export default {
  data() {
    return {
      pdfDoc: null,
      pages: 0
    }
  },
  methods: {
    async loadPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url)
      this.pdfDoc = await loadingTask.promise
      this.pages = this.pdfDoc.numPages

      for(let i = 1; i <= this.pages; i++) {
        const page = await this.pdfDoc.getPage(i)
        const viewport = page.getViewport({ scale: 1.0 })
        const canvas = document.getElementById(`pdf-canvas-${i}`)
        const context = canvas.getContext('2d')
        canvas.height = viewport.height
        canvas.width = viewport.width

        const renderContext = {
          canvasContext: context,
          viewport: viewport
        }
        page.render(renderContext)
      }
    }
  },
  mounted() {
    this.loadPDF('/sample.pdf') // 替换为你的PDF路径
  }
}
</script>

使用vue-pdf组件

对于快速集成，可以使用现成的vue-pdf组件。

安装依赖：

npm install vue-pdf

使用示例：

<template>
  <pdf :src="pdfSrc" style="width: 100%"></pdf>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  components: { pdf },
  data() {
    return {
      pdfSrc: '/sample.pdf' // 支持URL或base64格式
    }
  }
}
</script>

使用iframe嵌入

简单场景下可以直接使用HTML5的iframe元素：

<template>
  <iframe 
    src="/sample.pdf"
    style="width:100%; height:800px;"
    frameborder="0">
  </iframe>
</template>

使用第三方服务

对于需要更多功能的场景，可以考虑集成第三方PDF查看服务：

vue实现pdf预览

<template>
  <div id="pdf-viewer"></div>
</template>

<script>
export default {
  mounted() {
    const script = document.createElement('script')
    script.src = 'https://documentcloud.adobe.com/view-sdk/main.js'
    script.onload = () => {
      const viewerConfig = {
        clientId: "YOUR_CLIENT_ID",
        divId: "pdf-viewer"
      }
      window.AdobeDC.View.showPreviewFile(viewerConfig, {
        content: { location: { url: "/sample.pdf" } },
        metaData: { fileName: "Document.pdf" }
      })
    }
    document.body.appendChild(script)
  }
}
</script>