uni-app 在线和本地查看office

在uni-app中查看和编辑Office文件（如Word、Excel、PowerPoint等）通常涉及到调用第三方库或服务，因为原生JavaScript不具备直接处理Office文件的能力。以下是一个基于uni-app的示例，展示如何在线和本地查看Office文件。

在线查看Office文件

在线查看Office文件可以通过嵌入Office Online Viewer或Google Docs Viewer来实现。以下是一个使用Office Online Viewer的示例：

<template>
  <view>
    <web-view :src="officeUrl"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      officeUrl: ''
    };
  },
  mounted() {
    const fileUrl = 'https://example.com/path/to/your/document.docx'; // 替换为你的Office文件URL
    this.officeUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`;
  }
};
</script>

<style scoped>
/* 添加你的样式 */
</style>

本地查看Office文件

对于本地查看Office文件，由于uni-app运行在客户端（如小程序、H5、App等），直接查看本地Office文件的能力受限。通常的做法是将文件上传到服务器，然后使用在线查看的方式，或者借助一些第三方插件/SDK（如腾讯文档SDK、WPS Office SDK等），但这些SDK可能不支持所有平台。

以下是一个简单的示例，展示如何将文件上传到服务器，并在上传成功后通过在线方式查看：

// 假设你有一个文件上传的接口
const uploadFile = (filePath) => {
  uni.uploadFile({
    url: 'https://your-server.com/upload', // 替换为你的上传接口
    filePath: filePath,
    name: 'file',
    success: (uploadFileRes) => {
      const fileUrl = JSON.parse(uploadFileRes.data).fileUrl; // 假设服务器返回了文件URL
      // 使用在线查看方式
      const officeUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`;
      uni.navigateTo({
        url: `/pages/viewOffice/viewOffice?url=${encodeURIComponent(officeUrl)}`
      });
    },
    fail: (err) => {
      console.error('文件上传失败', err);
    }
  });
};

// 调用上传函数
const filePath = '_doc/example.docx'; // 替换为你的本地文件路径
uploadFile(filePath);

请注意，上述代码是简化示例，实际项目中可能需要处理更多的细节，如错误处理、权限验证、文件类型校验等。此外，对于App平台，可以考虑集成一些支持Office文件查看的原生插件或SDK，以提升用户体验。