当前位置：首页 > VUE

vue实现word pdf预览

2026-02-24 19:13:01VUE

Vue 实现 Word 和 PDF 预览

在 Vue 中实现 Word 和 PDF 文件预览，可以通过多种方式完成。以下是几种常见的方法：

使用第三方库预览 PDF

PDF 预览可以通过 pdf.js 或 vue-pdf 库实现。

安装 vue-pdf：

npm install vue-pdf

在 Vue 组件中使用：

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

<script>
import pdf from 'vue-pdf'

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

使用 iframe 预览 PDF

PDF 文件可以直接通过浏览器内置的预览功能显示：

<template>
  <iframe :src="pdfUrl" width="100%" height="600px"></iframe>
</template>

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

使用 mammoth.js 预览 Word 文档

Word 文档（.docx）可以通过 mammoth.js 转换为 HTML 进行预览。

安装 mammoth.js：

npm install mammoth

在 Vue 组件中使用：

<template>
  <div v-html="convertedHtml"></div>
</template>

<script>
import mammoth from 'mammoth'

export default {
  data() {
    return {
      convertedHtml: ''
    }
  },
  mounted() {
    fetch('/path/to/document.docx')
      .then(response => response.arrayBuffer())
      .then(arrayBuffer => mammoth.extractRawText({ arrayBuffer }))
      .then(result => {
        this.convertedHtml = result.value
      })
  }
}
</script>

使用 docx-preview 预览 Word 文档

docx-preview 是一个专门用于预览 Word 文档的库。

安装 docx-preview：

npm install docx-preview

在 Vue 组件中使用：

<template>
  <div ref="docxContainer"></div>
</template>

<script>
import { renderAsync } from 'docx-preview'

export default {
  mounted() {
    fetch('/path/to/document.docx')
      .then(response => response.arrayBuffer())
      .then(arrayBuffer => {
        renderAsync(arrayBuffer, this.$refs.docxContainer)
      })
  }
}
</script>

使用 Google Docs 或 Office Online 预览

可以通过嵌入 Google Docs 或 Office Online 的在线预览功能实现：

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

<script>
export default {
  data() {
    return {
      docUrl: 'https://your-domain.com/path/to/document.docx'
    }
  }
}
</script>

后端转换后预览

如果文件存储在服务器上，可以通过后端将 Word 转换为 PDF 或 HTML，再在前端显示：

后端使用 libreoffice 或 Aspose.Words 将 Word 转换为 PDF。
前端通过 API 获取转换后的文件并显示。

<template>
  <iframe :src="convertedPdfUrl" width="100%" height="600px"></iframe>
</template>

<script>
export default {
  data() {
    return {
      convertedPdfUrl: '/api/convert?file=document.docx'
    }
  }
}
</script>