导入导出
| Facade API | 付费版本 | 需要 Univer 服务端 | Univer on Node.js | Preset |
|---|---|---|---|---|
| ✅ | ✅ | ✅ | - | UniverSheetsAdvancedPreset |
Univer 通过插件 + 后端服务的方式实现了 Excel XLSX 格式文件的导入导出功能。其中插件集成了与服务端交互的能力，以及提供了一个导入导出的菜单栏入口。
该功能包含以下插件包：
❓
为什么 Univer 通过后端服务实现导入导出？
仅通过前端实现的导入导出无论是从性能还是效果上来说都无法满足企业需求，因此我们提供了后端服务来实现导入导出功能。你可以通过一些开源的 XLSX 解析库将文件解析为符合 IWorksheetData 接口的数据结构，然后通过 Facade API 将数据导入到 Univer 中。
Presets 安装
import { createUniver, defaultTheme, LocaleType, Tools } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN';
import { UniverSheetsAdvancedPreset } from '@univerjs/presets/preset-sheets-advanced';
import UniverPresetSheetsAdvancedZhCN from '@univerjs/presets/preset-sheets-advanced/locales/zh-CN';
const { univerAPI } = createUniver({
locale: LocaleType.ZH_CN,
locales: {
zhCN: Tools.deepMerge(
{},
UniverPresetSheetsCoreZhCN,
UniverPresetSheetsAdvancedZhCN,
),
},
theme: defaultTheme,
presets: [
UniverSheetsCorePreset(),
UniverSheetsAdvancedPreset({
universerEndpoint: 'http://localhost:3010',
}),
],
});高级安装
npm install @univerjs-pro/exchange-client @univerjs-pro/sheets-exchange-clientimport { LocaleType, Tools } from '@univerjs/core';
import { UniverExchangeClientPlugin } from '@univerjs-pro/exchange-client';
import { UniverSheetsExchangeClientPlugin } from '@univerjs-pro/sheets-exchange-client';
import ExchangeClientZhCN from '@univerjs-pro/exchange-client/locale/zh-CN';
import '@univerjs-pro/exchange-client/lib/index.css';
const univer = new Univer({
theme: defaultTheme,
locale: LocaleType.ZH_CN,
locales: {
[LocaleType.ZH_CN]: Tools.deepMerge(
ExchangeClientZhCN
),
},
});
const UNIVER_SERVER_ENDPOINT = `http://localhost:8000`;
univer.registerPlugin(UniverExchangeClientPlugin, {
// 以下配置为 Univer Server 的配置，请根据实际情况修改
uploadFileServerUrl: `${UNIVER_SERVER_ENDPOINT}/universer-api/stream/file/upload`,
importServerUrl: `${UNIVER_SERVER_ENDPOINT}/universer-api/exchange/{type}/import`,
exportServerUrl: `${UNIVER_SERVER_ENDPOINT}/universer-api/exchange/{type}/export`,
getTaskServerUrl: `${UNIVER_SERVER_ENDPOINT}/universer-api/exchange/task/{taskID}`,
signUrlServerUrl: `${UNIVER_SERVER_ENDPOINT}/universer-api/file/{fileID}/sign-url`,
downloadEndpointUrl: `${UNIVER_SERVER_ENDPOINT}/`
});
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/sheets/getting-started/cell-data
});
univerAPI.importXLSXToUnitId(file).then(unitId => {
console.log('Unit ID created:', unitId);
// 配合协同编辑自动加载数据一同使用 https://univer.ai/zh-CN/guides/sheets/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 配置，这些配置会用于存储导入、导出的文件。
阅读 常见问题 了解更多。