Vue3+TS+ univer实现表格、保存到后端

<template>
  <div>
    <!-- <el-upload
			  class="upload-demo"
			limit="1"   
			:on-exceed="handleExceed"
			:on-change="changeFile" 
			:auto-upload="false" 
			v-model:file-list="fileList">
			<template #trigger>
				<el-button size="middle" type="primary">选择文件</el-button>
			</template>
			<div slot="tip" class="el-upload__tip upload__tip">仅支持上传 {{ tip }} 格式文件，且不超过{{fileSize}}MB</div>
		</el-upload> -->
    <!-- <el-button type="primary" @click="confirmForm" style="margin-bottom: 20px;width: 100px;">导 入</el-button> -->
    <el-button type="primary" @click="confirmForm" style="margin-bottom: 20px;width: 100px;">保 存</el-button>
    <div ref="container" class="univer-container"></div>
  </div>
</template>
<!-- npm install @univerjs/core @univerjs/design @univerjs/docs @univerjs/docs-ui @univerjs/engine-formula @univerjs/engine-render @univerjs/sheets @univerjs/sheets-formula @univerjs/sheets-ui @univerjs/ui -->
<script lang="ts" setup="" name="test">
import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";

import { Univer } from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";
import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";
import { UniverUIPlugin } from "@univerjs/ui";
import { onBeforeUnmount, onMounted, ref } from "vue";
import { IWorkbookData } from "@univerjs/core";
import { ElMessage} from "element-plus";

const data: IWorkbookData = <any>({});

const univer = ref<any>();
const workbook = ref<any>();
const container = ref(null);

onMounted(() => {
  init(data);
});

onBeforeUnmount(() => {
  destroyUniver();
});

/**
 * Initialize univer instance and workbook instance
 * @param data {IWorkbookData} document see https://univer.work/api/core/interfaces/IWorkbookData.html
 */
let saveData = null
const init = (data = {}) => {
  const univer:any = new Univer({
    theme: defaultTheme,
  });
  univer.value = univer;


  // core plugins
  univer.registerPlugin(UniverRenderEnginePlugin);
  univer.registerPlugin(UniverFormulaEnginePlugin);
  univer.registerPlugin(UniverUIPlugin, {
    container: container.value,
    header: true,
    toolbar: true,
    footer: true,
  });

  // doc plugins
  univer.registerPlugin(UniverDocsPlugin, {
    hasScroll: false,
  });
  univer.registerPlugin(UniverDocsUIPlugin);

  // sheet plugins
  univer.registerPlugin(UniverSheetsPlugin);
  univer.registerPlugin(UniverSheetsUIPlugin);
  univer.registerPlugin(UniverSheetsFormulaPlugin);

  // create workbook instance
  console.log('data :>> ', data);
  workbook.value = univer.createUniverSheet(data);
  // saveData = workbook.value.save()
  // console.log( workbook.value.save() ,' workbook.value ')
};


// 保存
const confirmForm  =  () =>{
  console.log(' :>>打印 ', );
    // console.log('window.luckysheet.getAllSheets() :>> ', window.luckysheet.getAllSheets());
    const savedData = workbook.value.save();
    console.log(savedData.toJson())
    console.log(JSON.stringify(savedData),'savedDatasavedData')
}


	// //  上传文件相关
	// const tip = '.xlsx'
	// const fileSize = 10

	// const fileList = ref<UploadUserFile[]>([])

	// const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
	//    ElMessage.warning(
	//    	`文件限制1个, 不能添加 ${files.length + uploadFiles.length} 个,如需修改，请先删除`
	//    )
	// }

	// const file = ref()
  //   const changeFile = (uploadFile:any,fileArr:any) => {
	// 	if(!uploadFile) return 
	// 	console.log(fileArr,' file.type  :>> ',  uploadFile );
	// 	// 限制大小
	// 	const isLt2M = uploadFile.size / 1024 / 1024 < fileSize
	// 	if(!isLt2M){
	// 		const currIdx = fileArr.indexOf(uploadFile)
	// 		console.log(currIdx,'currIdx')
	// 		fileArr.splice(currIdx,1)
	// 		ElMessage.warning(`上传的文件大小不能超过 ${fileSize}M 哦~`)
	// 		return false
	// 	}

	// 	// 格式显示
	// 	const fileType = uploadFile.name.substring(uploadFile.name.lastIndexOf('.')).toLowerCase()
	// 	const fileTypeBol = /^.xlsx$/.test(fileType)
	// 	if(!fileTypeBol){
	// 		const currIdx = fileArr.indexOf(uploadFile)
	// 		console.log(currIdx,'currIdx')
	// 		fileArr.splice(currIdx,1)
	// 		ElMessage.warning(`仅支持上传格式为 ${tip} 的文件哦~`)
	// 		return false
	// 	}

	// 	file.value = uploadFile;
	// }

/**
 * Destroy univer instance and workbook instance
 */
const destroyUniver = () => {
  univer.value?.dispose();
  univer.value = null;
  // workbook.value = null;
};


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.univer-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Also hide the menubar */
:global(.univer-menubar) {
  display: none;
}
</style>

https://blog.csdn.net/yang_song97/article/details/134207142