office 系列文件不下载浏览器在线预览

如果遇到文档管理类的业务功能，会出现需要在线预览的业务需求，合同文件、发票文件等业务同样需要文件的在线预览。

解决方案一：微软 Office Web Viewer

Office Web Viewer 是由微软提供的一项免费服务，用户不需要安装 Office 软件，直接通过浏览器在线预览 docx、xlsx、pptx 文件。

Office Web Viewer 的服务链接为：

https://view.officeapps.live.com/op/view.aspx?src=[文件链接]

 其中 [文件链接] 是需要预览文件的在线地址，按需替换成自己的文件链接即可。

注意

1. 文件会传输到微软的服务器上，因此可能会涉及到文件隐私。
2. 不支持 pdf 预览。

适用场景

• 用于公网展示的文件预览，如某公告文件在线预览，能快速实现需求。
• 支持 docx、xlsx、pptx 文件，用于无需下载文件直接在线预览，适用于分享查看。

 前端实现：

<template>
  <div class="container">
    <div class="btns">
      <!-- 微软 Office Web Viewer 服务 -->
      <button @click="previewOffice(docx)">预览docx</button>
      <button @click="previewOffice(xlsx)">预览xlsx</button>
      <button @click="previewOffice(pptx)">预览pptx</button>
      <!-- pdf 直接预览 -->
      <button @click="officeUrl = pdf">预览pdf</button>
      <!-- 复制分享地址 -->
      <button class="copy-btn" v-if="officeUrl" @click="copyToClipboard(officeUrl)">
        复制分享地址
      </button>
    </div>
    <!-- 通过 iframe 嵌入 -->
    <iframe class="previewOffice" :src="officeUrl"></iframe>
  </div>
</template>

<script setup >
import { ref } from 'vue'


// 预览地址
const officeUrl = ref('')

// 资源地址
const docx = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.docx'
const xlsx = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.xlsx'
const pptx = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pptx'
const pdf = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pdf'

// 使用微软 Office Web Viewer 服务预览 office 文件
const previewOffice = (url) => {
  // 考虑到特殊字符，通过 encodeURIComponent 处理一下 url
  officeUrl.value = `https://view.officeapps.live.com/op/view.aspx?src=${url}`
}

// 复制分享地址
const copyToClipboard = async (text) => {
  await navigator.clipboard.writeText(text)
  alert('复制成功')
}
</script>

<style lang="scss" scoped>
body {
  margin: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .previewOffice {
    flex: 1;
  }

  .copy-btn {
    background-color: #070;
    color: #fff;
  }
}
</style>

效果如下： 

解决方案二：vue-office 组件 

 方案一文件会传输到微软的服务器上，因此可能会涉及到文件隐私问题。一些公网展示的文件可以使用方案一预览，涉及隐私可以用这个

1.docx 预览

• 安装依赖 npm i @vue-office/docx

<template>
  <div>
    <button @click="getFile">获取远程</button>
    <input type="file" accept=".docx" @change="previewFile" />
    <vue-office-docx :src="src" style="height: 100vh" />
  </div>
</template>

<script setup >
// 引入 VueOffice 组件
import VueOfficeDocx from '@vue-office/docx'
// 引入相关样式
import '@vue-office/docx/lib/index.css'
import { ref } from 'vue'

// 设置文档网络地址，可以是本地文件
const src = ref()

// 本地预览
const previewFile = async (event) => {
  const file = event.target.files?.[0]
  src.value = file
}

// 请求预览
const getFile = () => {
  src.value = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.docx'
}
</script>

<style lang="scss" scoped></style>

2.xlsx 预览

• 安装依赖 npm i @vue-office/excel

<template>
  <div>
    <button @click="getFile">获取远程</button>
    <input type="file" accept=".xlsx" @change="previewFile" />
    <vue-office-excel :src="src" style="height: 100vh" />
  </div>
</template>

<script setup >
// 引入 VueOffice 组件
import VueOfficeExcel from '@vue-office/excel'
// 引入相关样式
import '@vue-office/excel/lib/index.css'
import { ref } from 'vue'

// 设置文档网络地址，可以是本地文件
const src = ref()

// 本地预览
const previewFile = async (event) => {
  const file = event.target.files?.[0]
  src.value = file
}

// 请求预览
const getFile = () => {
  src.value = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.xlsx'
}
</script>

<style lang="scss" scoped></style>

3.pdf 预览

• 安装依赖 npm i @vue-office/pdf

<template>
  <div>
    <button @click="getFile">获取远程</button>
    <input type="file" accept=".pdf" @change="previewFile" />
    <vue-office-pdf :src="src" style="height: 100vh" />
  </div>
</template>
  
<script setup>
// 引入 VueOffice 组件
import VueOfficePdf from '@vue-office/pdf'
import { ref } from 'vue'

// 设置文档网络地址，可以是本地文件
const src = ref()

// 本地预览
const previewFile = async (event) => {
  const file = event.target.files?.[0]
  src.value = file
}

// 请求预览
const getFile = () => {
  src.value = 'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pdf'
}
</script>