当前位置：首页 > VUE

vue实现预览ppt

2026-01-17 05:27:12VUE

使用 vue-office 库实现 PPT 预览

vue-office 是一个支持多种文档预览的 Vue 组件库，包括 PPT、Word 和 Excel。安装依赖后可直接使用。

npm install @vue-office/docx @vue-office/excel @vue-office/pptx

在组件中引入并绑定文件数据：

<template>
  <vue-office-pptx 
    :src="pptFile" 
    style="height: 100vh;"
    @rendered="rendered"
  />
</template>

<script>
import VueOfficePptx from '@vue-office/pptx'

export default {
  components: { VueOfficePptx },
  data() {
    return {
      pptFile: 'https://example.com/presentation.pptx' // 支持在线URL或本地文件
    }
  },
  methods: {
    rendered() {
      console.log('PPT渲染完成')
    }
  }
}
</script>

使用 PDF.js 实现转换预览

对于需要将 PPT 转为 PDF 再预览的场景，可以使用 pdf.js 方案。需先通过后端转换 PPT 为 PDF。

vue实现预览ppt

前端安装依赖：

npm install pdfjs-dist

组件实现：

vue实现预览ppt

<template>
  <div>
    <div ref="pdfViewer" class="pdf-viewer"></div>
  </div>
</template>

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

export default {
  props: ['pdfUrl'],
  mounted() {
    this.loadPdf(this.pdfUrl)
  },
  methods: {
    async loadPdf(url) {
      const loadingTask = pdfjsLib.getDocument(url)
      const pdf = await loadingTask.promise

      for (let i = 1; i <= pdf.numPages; i++) {
        const page = await pdf.getPage(i)
        const viewport = page.getViewport({ scale: 1.0 })

        const canvas = document.createElement('canvas')
        const context = canvas.getContext('2d')
        canvas.height = viewport.height
        canvas.width = viewport.width

        await page.render({
          canvasContext: context,
          viewport: viewport
        }).promise

        this.$refs.pdfViewer.appendChild(canvas)
      }
    }
  }
}
</script>

使用微软 Office Online 嵌入预览

通过嵌入微软 Office Online 实现免转换预览：

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

<script>
export default {
  props: {
    pptUrl: {
      type: String,
      required: true
    }
  }
}
</script>

纯前端转换方案（需 mammoth.js）

对于简单 PPT 内容，可使用 mammoth.js 提取文本和图片：

npm install mammoth

实现示例：

<script>
import mammoth from "mammoth";

export default {
  methods: {
    async parsePpt(file) {
      const arrayBuffer = await file.arrayBuffer()
      const result = await mammoth.extractRawText({ arrayBuffer })
      console.log(result.value) // 获取PPT文本内容
    }
  }
}
</script>