vue使用luckysheet

### 集成Luckysheet至Vue项目

#### 安装依赖库
为了在Vue项目中集成Luckysheet，在开始之前需安装必要的npm包。这包括`vue-luckysheet`和其他辅助工具。

npm install vue-luckysheet luckyexcel xlsx file-saver --save

此命令会将所需的所有软件包添加到当前的Vue应用程序中[^3]。

#### 创建Luckysheet实例
接下来是在Vue组件内部初始化Luckysheet的具体方法：

import { defineComponent, onMounted } from 'vue';
import * as LuckyExcel from "luckyexcel";
import * as XLSX from "xlsx";

export default defineComponent({
    name: 'Spreadsheet',
    setup() {
        let luckysheetContainer;

        const initLuckysheet = () => {
            window.luckysheet.create({
                container: luckysheetContainer,
                data: [],
                title: '',
                lang: 'zh'
            });
        };

        onMounted(() => {
            import('vue-luckysheet').then((module) => {
                module.init();
                initLuckysheet();
            });
        });

        return {
            luckysheetContainer
        };
    }
});

上述代码片段展示了如何通过定义一个名为`Spreadsheet`的新Vue组件来加载Luckysheet，并设置其容器属性以便后续操作[^1]。

#### 文件导入与导出功能实现
对于文件的操作，比如从`.xlsx`格式读取内容并显示于Luckysheet内，或是反过来把编辑后的数据另存为Excel文档，则可以利用Luckyexcel插件完成这些任务。

const readAndShowFileContent = (fileInputEvent) => {
    const files = fileInputEvent.target.files;
    if (!files || !files.length) return;

    const reader = new FileReader();

    reader.onload = function(e){
        var workbook = XLSX.read(e.target.result,{type:"binary"});
        
        LuckyExcel.transformExcelToLucky(workbook).then(({data})=>{
            window.luckysheet.destroy();
            window.luckysheet.create({container:luckysheetContainer,data:title:'Imported File'});
        }).catch(err=>console.error("Failed to parse Excel file",err));
    }

    reader.readAsBinaryString(files[0]);
};

// 导出功能
const exportDataAsExcel = ()=>{
    const sheetJson = JSON.stringify(window.luckysheet.getAllSheets());
    
    LuckyExcel.exportExcelBySheetJson(sheetJson,{
      type:"original",
      fileName:"Exported_Spreadsheet"
    });
};

这段脚本实现了两个主要函数：一个是用来解析用户上传的Excel文件并将其中的数据呈现在界面上；另一个则是允许用户将以JSON形式存储的工作簿信息转换回标准的.xlsx文件供下载。