uni-app 一个像样的离线office浏览插件

针对uni-app中实现一个像样的离线Office浏览插件的需求，我们可以利用一些开源库来实现文档（如Word、Excel、PowerPoint）的预览功能。由于uni-app主要面向移动端和小程序，因此我们需要选择支持这些平台的库。以下是一个基于mammoth.js（用于解析Word文档）和xlsx（用于解析Excel文档）的简单示例，PowerPoint的解析相对复杂，这里不展开。

1. 安装依赖

首先，在uni-app项目中安装所需的npm包：

npm install mammoth xlsx

2. 编写组件

创建一个新的组件OfficeViewer.vue，用于展示Word和Excel文档。

<template>
  <view>
    <text v-if="fileType === 'docx'">{{ documentContent }}</text>
    <view v-else-if="fileType === 'xlsx'" class="excel-table">
      <view v-for="(row, rowIndex) in sheetData" :key="rowIndex" class="excel-row">
        <text v-for="(cell, cellIndex) in row" :key="cellIndex" class="excel-cell">{{ cell }}</text>
      </view>
    </view>
    <text v-else>Unsupported file type</text>
  </view>
</template>

<script>
import mammoth from 'mammoth';
import * as XLSX from 'xlsx';

export default {
  data() {
    return {
      documentContent: '',
      sheetData: [],
      fileType: ''
    };
  },
  methods: {
    readFile(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const arrayBuffer = e.target.result;
        this.fileType = file.type.split('/')[1];
        if (this.fileType === 'vnd.openxmlformats-officedocument.wordprocessingml.document') {
          mammoth.convertToHtml({ arrayBuffer })
            .then(result => {
              this.documentContent = result.value;
            })
            .catch(err => console.error(err));
        } else if (this.fileType === 'vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
          const data = new Uint8Array(arrayBuffer);
          const workbook = XLSX.read(data, { type: 'array' });
          const sheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[sheetName];
          this.sheetData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        }
      };
      reader.readAsArrayBuffer(file);
    }
  }
};
</script>

<style>
/* Add your styles here */
</style>

3. 使用组件

在你的页面中引入并使用这个组件：

<template>
  <view>
    <OfficeViewer @change-file="handleFileChange" />
    <input type="file" @change="handleFileChange" />
  </view>
</template>

<script>
import OfficeViewer from '@/components/OfficeViewer.vue';

export default {
  components: {
    OfficeViewer
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0];
      this.$refs.officeViewer.readFile(file);
    }
  }
};
</script>

注意：由于uni-app的跨平台特性，某些功能（如文件读取）在不同平台上可能有所差异，需要根据实际平台进行调整。此外，对于PowerPoint文档，可以考虑使用其他库（如pptxjs）进行解析和渲染。