vue3引入vue-office

### 如何在 Vue 3 项目中引入和使用 `vue-office`

#### 安装依赖

为了能够在 Vue 3 中使用 `vue-office`，首先需要安装必要的 npm 包：

npm install vue-office-exceljs exceljs --save

这会安装 `vue-office-exceljs` 和其依赖项 `exceljs`。

#### 创建 Excel 组件

创建一个新的组件来处理所有的 Excel 功能。假设这个文件名为 `ExcelHandler.vue`:

<template>
  <div>
    <!-- UI elements for interacting with Excel functionality -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Workbook } from 'exceljs';

// Functionality related to creating or manipulating workbooks can be defined here.
const workbook = new Workbook();
</script>

#### 注册全局组件或局部导入

如果希望在整个应用程序中都可以访问到这些功能，则可以在项目的入口文件 (`main.ts`) 或者通过插件的方式注册此组件；如果是仅限于某个页面或模块内使用的话就直接在这个特定位置按需加载即可[^1]。

对于全局注册方式，在 `main.ts` 文件里添加如下代码片段：

import { createApp } from 'vue'
import App from './App.vue'
import ExcelHandler from '@/components/ExcelHandler.vue'

createApp(App).component('ExcelHandler', ExcelHandler).mount('#app')

而对于局部导入的情况则是在目标 `.vue` 文件内部完成操作：

import ExcelHandler from '../path/to/your/excelfile.vue'; // Adjust path as necessary.

export default {
  name: "YourComponentName",
  components: {
    ExcelHandler,
  },
};

#### 使用示例

下面是一个简单的例子展示如何利用上述设置读取并显示 Excel 数据表中的内容：

<!-- In your template section of any .vue file where you've imported the component -->

<template>
  <div v-if="loadedData.length > 0">
    <table border="1px solid black">
      <thead>
        <tr>
          <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in loadedData" :key="rowIndex">
          <td v-for="(cellValue, cellIndex) in row" :key="cellIndex">{{ cellValue }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import * as fs from 'file-saver';
import { read } from 'xlsx';

interface RowType {
  [key: string]: string | number;
}

let headers = ref<Array<string>>([]);
let loadedData = reactive<Array<RowType>>([]);

onMounted(() => {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = '.xlsx,.xls';
  
  input.onchange = async (e:Event) => {
    let files = (<HTMLInputElement>e.target!).files!;
    
    if (!files || !files[0]) return;

    var reader = new FileReader();

    reader.onload = function(e){
      var data = new Uint8Array((<FileReader>e.target!).result!);
      
      /* read workbook */
      var wb = read(data, {type:'array'});
      
      /* grab first sheet */
      var wsname = wb.SheetNames[0];
      var ws = wb.Sheets[wsname];

      /* Convert array of arrays into object */
      var jsonData = XLSX.utils.sheet_to_json(ws,{defval:""});
      
      /* Update state variables */
      Object.keys(jsonData[0]).forEach(key=>headers.value.push(key));
      jsonData.forEach(item=>{
        let newRow:{[k:string]:any}={};
        Object.entries(item).map(([k,v])=>newRow[k]=v);
        loadedData.push(newRow);
      });
    };

    reader.readAsArrayBuffer(files[0]);
  };
  
  input.click(); 
});
</script>

这段脚本展示了当用户上传了一个 Excel 文件之后怎样解析它并将其中的数据渲染成 HTML 表格的形式呈现出来[^2].