vue3 ts 在线预览word和Excel

要在Vue3中预览Word和Excel文档，您可以使用以下步骤：

1. 安装 FileSaver 和 XLSX 库：使用以下命令安装这两个库。

npm install file-saver xlsx

2. 添加导出功能：在Vue组件中添加导出功能。

<template>
  <div>
    <button @click="exportExcel">Export Excel</button>
  </div>
</template>

<script>
import { saveAs } from 'file-saver'
import XLSX from 'xlsx'

export default {
  name: 'ExportExcel',
  methods: {
    exportExcel() {
      const worksheet = XLSX.utils.json_to_sheet(this.data)
      const workbook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] }
      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
      const fileData = new Blob([excelBuffer], { type: 'application/octet-stream' })
      saveAs(fileData, 'data.xlsx')
    }
  }
}
</script>

3. 添加预览功能：要在Vue组件中添加预览功能，请使用以下步骤。

<template>
  <div>
    <button @click="previewWord">Preview Word</button>
    <button @click="previewExcel">Preview Excel</button>
  </div>
</template>

<script>
export default {
  name: 'PreviewDocument',
  methods: {
    previewWord() {
      window.open('https://view.officeapps.live.com/op/view.aspx?src=https://example.com/document.docx', '_blank')
    },
    previewExcel() {
      window.open('https://view.officeapps.live.com/op/view.aspx?src=https://example.com/document.xlsx', '_blank')
    }
  }
}
</script>

在这里，您需要将URL替换为您的文档URL。使用此方法，您可以在Vue3中预览Word和Excel文档。