初探Univer电子文档组件

<el-button type="primary" @click="printFn">打印</el-button><el-buttontype="primary" @click="exportFn">导出</el-button><divref="container" />

import { UniverSheetsCorePreset } from "@univerjs/preset-sheets-core";import UniverPresetSheetsCoreZhCN from "@univerjs/preset-sheets-core/locales/zh-CN";import { createUniver, LocaleType, mergeLocales } from "@univerjs/presets";import { onBeforeUnmount, onMounted, ref } from "vue";import "@univerjs/preset-sheets-core/lib/index.css";//导出import { UniverSheetsAdvancedPreset } from "@univerjs/preset-sheets-advanced";import UniverPresetSheetsAdvancedZhCN from "@univerjs/preset-sheets-advanced/locales/zh-CN";import { UniverSheetsDrawingPreset } from "@univerjs/preset-sheets-drawing";import UniverPresetSheetsDrawingZhCN from "@univerjs/preset-sheets-drawing/locales/zh-CN";import "@univerjs/preset-sheets-drawing/lib/index.css";import "@univerjs/preset-sheets-advanced/lib/index.css";import "@univerjs-pro/exchange-client/facade";import { downloadFile } from "@univerjs-pro/exchange-client";//打印import "@univerjs-pro/sheets-print/facade";const container = ref(null);let univerInstance = null;let univerAPIInstance = null;onMounted(async () => {  const { univer, univerAPI } = createUniver({    locale: LocaleType.ZH_CN,    locales: {      [LocaleType.ZH_CN]: mergeLocales(        UniverPresetSheetsCoreZhCN,        //导出打印        UniverPresetSheetsDrawingZhCN,        UniverPresetSheetsAdvancedZhCN,      ),    },    presets: [      UniverSheetsCorePreset({        container: container.value,      }),      UniverSheetsDrawingPreset(),      //导出      UniverSheetsAdvancedPreset({        universerEndpoint: "http://localhost:3010",      }),    ],  });  univerAPI.createWorkbook({ name: "Test Sheet" });    univerInstance = univer;  univerAPIInstance = univerAPI;});

const exportFn = async () => {  const workbook = univerAPIInstance.getActiveWorkbook(); // 获取当前活动的工作簿  // const unitId = workbook.getId(); // 获取工作簿 ID  // const file = await univerAPIInstance.exportXLSXByUnitIdAsync(unitId);  const snapshot = workbook.getSnapshot();  const file = await univerAPIInstance.exportXLSXBySnapshotAsync(snapshot);  // 下载文件  downloadFile(file, "univer", "xlsx");};

const printFn = () => {  const workbook = univerAPIInstance.getActiveWorkbook(); // 获取当前活动的工作簿  workbook.openPrintDialog();};

onBeforeUnmount(() => {  univerInstance?.dispose();  univerAPIInstance?.dispose();  univerInstance = null;  univerAPIInstance = null;});