导入 & 导出

📊 Univer Sheet

🏆

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

💻

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

Univer 通过插件 + 后端服务的方式实现了 Excel XLSX 格式文件的导入导出功能。其中插件集成了与服务端交互的能力，以及提供了一个导入导出的菜单栏入口。

❓

为什么 Univer 通过后端服务实现导入导出？

仅通过前端实现的导入导出无论是从性能还是效果上来说都无法满足企业需求，因此我们提供了后端服务来实现导入导出功能。你可以通过一些开源的 XLSX 解析库将文件解析为符合 IWorksheetData 接口的数据结构，然后通过 Facade API 将数据导入到 Univer 中。

安装

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

引入

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

国际化

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

注册

univer.registerPlugin(UniverExchangeClientPlugin);
univer.registerPlugin(UniverSheetsExchangeClientPlugin);

配置

如果 Univer 页面与服务端不在同一个域名下，需要额外配置 uploadFileServerUrl 等参数。

univer.registerPlugin(UniverExchangeClientPlugin, {
  uploadFileServerUrl: `http://localhost:3010/universer-api/stream/file/upload`,
  importServerUrl: `http://localhost:3010/universer-api/exchange/{type}/import`,
  exportServerUrl: `http://localhost:3010/universer-api/exchange/{type}/export`,
  getTaskServerUrl: `http://localhost:3010/universer-api/exchange/task/{taskID}`,
  signUrlServerUrl: `http://localhost:3010/universer-api/file/{fileID}/sign-url`,
});
univer.registerPlugin(UniverSheetsExchangeClientPlugin);

配置 maxTimeoutTime 可改变上传文件的最大超时时间，若您需要上传的文件较大，可适当调大该值，默认为 2 分钟。

univer.registerPlugin(UniverExchangeClientPlugin, {
  maxTimeoutTime: 1000 * 60 * 10, // 10 分钟
});
univer.registerPlugin(UniverSheetsExchangeClientPlugin);

定制化使用

如果你不满足插件默认提供的功能，你还可以调用 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/exchange-client 提供的功能，使用前确保项目已经安装好了@univerjs-pro/exchange-client。

导入导出 API 异常？

要让导入导出正常工作，还需要正确配置 Univer Server 的 S3 配置，这些配置会用于存储导入、导出的文件。

阅读常见问题了解更多。

打印协同编辑