vue xlsx预览

### 实现 xlsx 文件预览

在 Vue 项目中实现 xlsx 文件的预览功能涉及几个关键步骤。对于不同版本的 Vue 和 `xlsx` 库，引用方式有所不同。

#### 对于 Vue 2：

在 Vue 2 中，可以按照如下方式进行操作来加载并处理 Excel 文件[^1]。

// main.js 或组件内
import xlsx from 'xlsx';

methods: {
    handleFileUpload(event) {
        const file = event.target.files[0];
        const reader = new FileReader();
        
        reader.onload = function(e) {
            /* 解析数据 */
            const data = new Uint8Array(e.target.result);
            const workbook = xlsx.read(data, {type: 'array'});
            
            /* 获取第一个工作表名称 */
            const firstSheetName = workbook.SheetNames[0];
            
            /* 获得所选的工作表 */
            const worksheet = workbook.Sheets[firstSheetName];
            
            /* 将表格转换成 JSON 数据 */
            const jsonData = xlsx.utils.sheet_to_json(worksheet);
            console.log(jsonData); // 输出解析后的JSON对象到控制台
            
            // 可以在这里将jsonData绑定至data属性用于展示
        };
        
        reader.readAsArrayBuffer(file);
    }
}

#### 对于 Vue 3：

而在 Vue 3 中，则应采用不同的导入语句以及可能更现代的方法来完成相同的目标[^1][^2]。

// setup() 函数内部或 <script setup> 块里
import * as XLSX from 'xlsx/xlsx.mjs'; 

const handleFileChange = (event) => {
    let selectedFile = event.target.files[0];

    if (!selectedFile) return;

    var reader = new FileReader();

    reader.onload = async function(e){
        let data = new Uint8Array(e.target.result);

        await XLSX.read(data, { type:"array" });

        let sheetName = XLSX.readFile(selectedFile).SheetNames[0]; 
        let worksheet = XLSX.readFile(selectedFile).Sheets[sheetName];
        
        let json_data = XLSX.utils.sheet_to_json(worksheet,{header:1});
        console.table(json_data); // 展示为表格形式
        
        // 绑定json_data 到响应式变量以便渲染页面上显示
    };

    reader.readAsArrayBuffer(selectedFile);
};

上述代码片段展示了如何读取上传的 `.xlsx` 文件，并将其内容转化为 JavaScript 的数组结构，进而可以在前端界面上呈现出来。注意，在实际应用开发过程中还需要考虑错误处理、用户体验优化等方面的问题。