当前位置：首页 > VUE

vue实现文档预览

2026-03-09 18:23:37VUE

Vue 实现文档预览的方法

使用 iframe 嵌入预览

通过 iframe 直接嵌入文档链接，适合预览 PDF、Word 等浏览器支持的格式。需要确保文档地址可公开访问或已转为基础格式（如 PDF）。

<template>
  <iframe 
    :src="`https://docs.google.com/viewer?url=${encodeURIComponent(fileUrl)}&embedded=true`"
    width="100%" 
    height="500px"
    frameborder="0"
  ></iframe>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: 'https://example.com/document.pdf'
    }
  }
}
</script>

使用第三方库（如 PDF.js）

对于 PDF 文件，可以使用 Mozilla 开源的 PDF.js 库实现高度定制化的预览。

安装依赖：

npm install pdfjs-dist

组件实现：

<template>
  <div>
    <canvas v-for="page in pages" :key="page" :ref="`canvas-${page}`"></canvas>
  </div>
</template>

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

export default {
  data() {
    return {
      pdfDoc: null,
      pages: []
    }
  },
  methods: {
    async loadPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url)
      this.pdfDoc = await loadingTask.promise
      this.pages = Array.from({ length: this.pdfDoc.numPages }, (_, i) => i + 1)

      this.pages.forEach(async (pageNum) => {
        const page = await this.pdfDoc.getPage(pageNum)
        const viewport = page.getViewport({ scale: 1.0 })
        const canvas = this.$refs[`canvas-${pageNum}`][0]
        const context = canvas.getContext('2d')
        canvas.height = viewport.height
        canvas.width = viewport.width

        await page.render({
          canvasContext: context,
          viewport: viewport
        }).promise
      })
    }
  },
  mounted() {
    this.loadPDF('/sample.pdf')
  }
}
</script>

使用 Office 在线预览（Microsoft 365）

通过 Microsoft 的官方接口预览 Office 文档，需注册开发者账号获取 API 权限。

<template>
  <iframe 
    :src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`"
    width="100%"
    height="500px"
    frameborder="0"
  ></iframe>
</template>

使用 Vue 组件库（如 vue-doc-preview）

对于快速集成，可以使用现成的 Vue 组件库。

安装：

npm install vue-doc-preview

使用：

<template>
  <doc-preview :url="fileUrl" :preview="true"></doc-preview>
</template>

<script>
import DocPreview from 'vue-doc-preview'

export default {
  components: { DocPreview },
  data() {
    return {
      fileUrl: '/test.docx'
    }
  }
}
</script>

服务端转码预览

对于浏览器不直接支持的格式（如 CAD），需先通过服务端转码为图片或 HTML。常用工具有：

LibreOffice（转 PDF/HTML）
FFmpeg（视频截图）
Blender（3D 模型截图）

前端通过 API 获取转码后的内容：

vue实现文档预览

async fetchConvertedFile() {
  const res = await axios.post('/api/convert', { filePath: 'design.dwg' })
  this.previewImages = res.data.images // 返回图片数组
}