vue 页面预览word文件和excel文件

在 Vue 中预览 Word 文件和 Excel 文件，可以通过引入第三方插件实现。

1. 首先，需要安装并引入 `office-ui-fabric-js` 和 `office-ui-fabric-react` 这两个依赖库。

npm install office-ui-fabric-js office-ui-fabric-react --save

2. 然后，可以通过 `office-ui-fabric-react` 提供的 `DocumentCard` 和 `DocumentCardPreview` 组件来实现 Word 和 Excel 文件的预览。需要注意的是，这两个组件需要在 `componentDidMount` 生命周期中加载。

<template>
  <div>
    <DocumentCard>
      <DocumentCardPreview
        previewImages={[
          {
            previewIconProps: {
              iconName: 'WordDocument'
            },
            previewProps: {
              previewFileType: PreviewFileType.Document,
              previewFileUrl: 'http://example.com/word.docx'
            }
          }
        ]}
      />
    </DocumentCard>
    <DocumentCard>
      <DocumentCardPreview
        previewImages={[
          {
            previewIconProps: {
              iconName: 'ExcelWorkbook'
            },
            previewProps: {
              previewFileType: PreviewFileType.Document,
              previewFileUrl: 'http://example.com/excel.xlsx'
            }
          }
        ]}
      />
    </DocumentCard>
  </div>
</template>

<script>
import { DocumentCard, DocumentCardPreview, PreviewFileType } from 'office-ui-fabric-react'

export default {
  name: 'FilePreview',
  mounted () {
    require('office-ui-fabric-js/dist/css/fabric.min.css')
    require('office-ui-fabric-js/dist/css/fabric.components.min.css')
  },
  components: {
    DocumentCard,
    DocumentCardPreview
  }
}
</script>

<style scoped>
/* 样式可以根据需求自行修改 */
</style>

3. 最后，需要在后端将 Word 和 Excel 文件转换为 PDF 格式，然后在前端通过 `iframe` 标签来展示 PDF 文件。

<template>
  <div>
    <iframe :src="pdfUrl" frameborder="0" width="100%" height="600"></iframe>
  </div>
</template>

<script>
export default {
  name: 'FilePreview',
  data () {
    return {
      pdfUrl: ''
    }
  },
  mounted () {
    this.getPdfUrl()
  },
  methods: {
    getPdfUrl () {
      // 从后端获取 PDF 文件的 URL
      // ...
      this.pdfUrl = 'http://example.com/file.pdf'
    }
  }
}
</script>

<style scoped>
/* 样式可以根据需求自行修改 */
</style>

以上是两种实现 Word 和 Excel 文件预览的方法，可以根据自己的需求选择合适的方式。