uniapp项目做公众号,如何点击打开 .xlsx文件

在 UniApp 开发公众号项目中，处理 Excel 文件通常涉及到使用浏览器环境下的功能，因为微信公众号本身不支持直接打开本地文件。你可以使用第三方库或者在线预览的方式让用户查看 .xlsx 文件。

1. **使用 HTML5 FileReader API**：
使用 JavaScript 的 `FileReader` 对象可以读取用户选择的文件，包括 Excel。创建一个表单元素让用户选择文件，然后通过事件监听器读取并解析文件内容。示例代码：

<input type="file" accept=".xlsx" @change="handleXlsxFileChange($event)">
<template #preview>
  <div v-if="showPreview">
    <!-- 显示文件预览的区域 -->
  </div>
</template>

methods: {
  handleXlsxFileChange(e) {
    const file = e.target.files[0];
    if (file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
      this.showPreview = true; // 展开预览区域
      this.readFile(file);
    }
  },
  readFile(file) {
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = () => {
      // 解析文件内容（例如使用 SheetJS 或者 js-xlsx 库）
    };
  },
}

2. **使用 SheetJS（js-xlsx）库**：
可以引入 SheetJS 的 js-xlsx 库将 Excel 文件转换成 JSON 数据，然后在前端展示。先安装依赖，然后在 Vue 中使用：

npm install sheetjs js-xlsx

import XLSX from 'xlsx';

handleXlsxFileChange(e) {
  const file = e.target.files[0];
  this.readFile(file, XLSX.read);
}

readFile(file, readFn) {
  readFn(file)
    .then((result) => {
      // result 包含了 Excel 文件的内容，可以根据需要渲染到页面上
      this.showPreview = true;
    })
    .catch((error) => {
      console.error('Error reading Excel file:', error);
    });
}