vue实现word pdf预览

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，再在前端显示：

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

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

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

注意事项

• PDF 预览适合直接在浏览器中显示，Word 预览通常需要转换为 HTML 或 PDF。
• 使用在线服务（如 Google Docs 或 Office Online）需要文件可公开访问或通过身份验证。
• 大文件预览时需考虑性能问题，可结合分页或懒加载优化体验。