导入 & 导出

📊 Univer Sheet

🏆

本功能包含闭源代码，允许任何用户免费商用。此外也包含了可选的商业升级计划，可提供更丰富的功能和服务。

💻

本功能依赖 Univer 后端服务，在使用前请先确保你已经阅读了相关文档，并完成了部署。

我们通过服务端接口提供导入导出 Excel 文件的能力，安装此插件，能在 Univer 中快速接入导入导出能力。

目前仅支持 .xlsx 格式。

安装

pnpm add @univerjs-pro/sheets-exchange-client

引入

import '@univerjs-pro/sheets-exchange-client/lib/index.css';
 
import { UniverSheetsExchangeClientPlugin } from '@univerjs-pro/sheets-exchange-client';

国际化

import { LocaleType, Tools } from '@univerjs/core';
import SheetsExchangeClientZhCN from '@univerjs-pro/sheets-exchange-client/locale/zh-CN';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: Tools.deepMerge(
      SheetsExchangeClientZhCN
    ),
  },
});

注册

univer.registerPlugin(UniverSheetsExchangeClientPlugin);

配置

如果导入导出的接口没有变动，可以不用配置，如果有变动，可以通过以下方式配置接口地址：

import { IConfigService } from '@univerjs/core'
import { EXCHANGE_UPLOAD_FILE_SERVER_URL_KEY, EXCHANGE_IMPORT_SERVER_URL_KEY, EXCHANGE_EXPORT_SERVER_URL_KEY, EXCHANGE_GET_TASK_SERVER_URL_KEY, EXCHANGE_SIGN_URL_SERVER_URL_KEY } from '@univerjs-pro/sheets-exchange-client';
 
const injector = univer.__getInjector();
const configService = injector.get(IConfigService);
configService.setConfig(EXCHANGE_UPLOAD_FILE_SERVER_URL_KEY, `http://localhost:3010/universer-api/stream/file/upload`);
configService.setConfig(EXCHANGE_IMPORT_SERVER_URL_KEY, `http://localhost:3010/universer-api/exchange/{type}/import`);
configService.setConfig(EXCHANGE_EXPORT_SERVER_URL_KEY, `http://localhost:3010/universer-api/exchange/{type}/export`);
configService.setConfig(EXCHANGE_GET_TASK_SERVER_URL_KEY, `http://localhost:3010/universer-api/exchange/task/{taskID}`);
configService.setConfig(EXCHANGE_SIGN_URL_SERVER_URL_KEY, `http://localhost:3010/universer-api/file/{fileID}/sign-url`);

定制化使用

如果你不满足插件默认提供的功能，你还可以调用 Facade API 来实现自定义的导入和导出的流程，请阅读与服务端交互的功能。

常见问题

如何打开或编辑一个 Excel 文件的 URL 地址？

这里提供一种实现思路供参考，先通过浏览器 API 将 URL 下载转换得到一个 File 对象，然后调用 Facade API 的 importXLSXToUnitId 或者 importXLSXToSnapshot 方法导入，参考代码如下：

const url = 'https://example.com/filename.xlsx'; // 你的 Excel 文件 URL
 
// 从 URL 获取文件并转换为 File 对象的函数
async function fetchExcelFile(url) {
  try {
    const response = await fetch(url);
    const blob = await response.blob();
    return new File([blob], 'filename.xlsx', { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  } catch (error) {
    console.error('Failed to fetch the file:', error);
  }
}
 
// 从 URL 获取文件并导入为快照
fetchExcelFile(url).then(async file => {
  if (file) {
    // 以下代码需要根据实际情况修改
    univerAPI.importXLSXToSnapshot(file).then(snapshot => {
      console.log('Snapshot created:', snapshot); // 了解更多: https://univer.ai/guides/sheet/getting-started/cell-data
    });
 
    univerAPI.importXLSXToUnitId(file).then(unitId => {
      console.log('Unit ID created:', unitId);
 
      // 配合协同编辑自动加载数据一同使用 https://univer.ai/zh-CN/guides/sheet/features/collaboration#自动加载数据
      const url = new URL(window.location.href);
      const unit = url.searchParams.get('unit');
      url.searchParams.set('unit', unitID);
      url.searchParams.set('type', "2"); // 2 的意思是 String(UniverInstanceType.UNIVER_SHEET)
      console.log('Unit URL:', url.toString());
    });
  }
});

注: Facade API univerAPI.importXLSXToSnapshot 会调用 @univerjs-pro/sheets-exchange-client 提供的功能，使用前确保项目已经安装好了@univerjs-pro/sheets-exchange-client。

打印协同编辑