Vue中如何实现在线预览word文件、excel文件

要在Vue中实现在线预览Word文件或Excel文件，可以使用第三方插件view-doc和vue-embed, 具体步骤如下：

1. 安装插件

在Vue项目中安装view-doc和vue-embed插件。

npm install view-doc vue-embed --save

2. 引入插件并定义组件

在Vue项目的入口文件中，引入view-doc和vue-embed插件并注册成全局组件。

import Vue from 'vue'
import viewDoc from 'view-doc'
import vueEmbed from 'vue-embed'

Vue.use(viewDoc)
Vue.use(vueEmbed)

new Vue({
  el: '#app'
})

然后在需要使用预览功能的组件中，定义doc-view和embed-view组件，如下所示：

<template>
  <div>
    <doc-view :url="docUrl"></doc-view>
    <embed-view :url="excelUrl"></embed-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      docUrl: 'http://example.com/example.docx', // Word文件地址
      excelUrl: 'http://example.com/example.xlsx' // Excel文件地址
    }
  }
}
</script>

3. 其他配置

如果需要在预览时自定义文档的名称，可以将名称传递给doc-view和embed-view组件的title属性。

<template>
  <div>
    <doc-view :url="docUrl" title="文档1"></doc-view>
    <embed-view :url="excelUrl" title="文档2"></embed-view>
  </div>
</template>

示例

我这里提供两个示例：

示例1：预览本地Word文件

在public文件夹下新建一个example.docx文件，然后使用如下代码预览该文件：

<template>
  <doc-view :url="docUrl" title="example.docx"></doc-view>
</template>

<script>
export default {
  data () {
    return {
      docUrl: '/example.docx' // Word文件地址
    }
  }
}
</script>

示例2：预览通过接口获取的Excel文件

假设接口返回的Excel文件地址为http://example.com/data/excel.xlsx，则代码如下：

<template>
  <embed-view :url="excelUrl" title="excel文件"></embed-view>
</template>

<script>
export default {
  async created () {
    const response = await fetch('http://example.com/data/excel.xlsx')
    const blob = await response.blob()
    const url = URL.createObjectURL(blob)

    this.excelUrl = url
  },

  data () {
    return {
      excelUrl: '' // Excel文件地址
    }
  }
}
</script>

在Vue组件的created生命周期钩子函数中，使用fetch函数获取Excel文件的二进制数据，并通过URL.createObjectURL方法将其转化成二进制地址，最后通过将地址赋值给Vue组件data中的excelUrl属性，完成Excel文件的预览。