高级功能简介
Univer 的核心框架以及许多基础功能在 GitHub 上开源，并基于 Apache-2.0 授权协议允许个人与组织免费使用，同时我们为企业用户提供了一系列高级功能，包括：
- 数据透视表
- 打印
- 导入导出
- 协同编辑（包含协同光标和历史记录）
- 协同浏览 Live Share
等等，这些功能将会在文档中以 Pro 标识。
高级功能基于 Univer 商业授权协议，可以免费使用，不过存在一些限制。如果你需要解锁限制，可以联系我们的销售团队以购买许可证。你可以在 许可证 一章了解你是否需要许可证，以及如何获取和使用许可证。
集成 Univer 高级功能
安装并运行服务端
bash -c "$(curl -fsSL https://get.univer.ai)"⚠️
如果在安装或使用过程中遇到问题，请查看常见问题。
安装并运行客户端
执行以下命令需要设备安装有 nodejs >= 18, npm >= 8 和 git。
npx degit dream-num/univer-pro-sheet-start-kit univer-pro-sheet-start-kit
cd univer-pro-sheet-start-kit
npm install
npm run dev⚠️
如果服务端部署在其他机器上，需要在 vite.config.ts 中把 server 配置里的 localhost 改为该机器的 IP 地址。
🎉 恭喜你，你已成功创建了包含了服务端的 Univer 项目，你可以访问 http://localhost:5173/ 体验高级功能和协同编辑。
你可以在 dream-num/univer-pro-sheet-start-kit 找到该模板的源代码。
执行以下命令需要设备安装有 nodejs >= 18, pnpm >= 7 和 git。
pnpm dlx degit dream-num/univer-pro-sheet-start-kit univer-pro-sheet-start-kit
cd univer-pro-sheet-start-kit
pnpm install
pnpm dev⚠️
如果服务端部署在其他机器上，需要在 vite.config.ts 中把 server 配置里的 localhost 改为该机器的 IP 地址。
🎉 恭喜你，你已成功创建了包含了服务端的 Univer 项目，你可以访问 http://localhost:5173/ 体验高级功能和协同编辑。
你可以在 dream-num/univer-pro-sheet-start-kit 找到该模板的源代码。
如果你想不借助任何前端构建工具直接在浏览器中运行 Univer，你可以将以下代码复制保存到一个 HTML 文件中，然后双击在浏览器中打开该文件，即可体验打印、协同编辑、导入导出等功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Univer UMD With Collaboration, Live Share, Print, Exchange
</title>
<script src="https://unpkg.com/@univerjs/umd/lib/univer.full.umd.js"></script>
<script src="https://unpkg.com/@univerjs/umd/lib/locale/zh-CN.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@univerjs/umd/lib/univer.css">
<script src="https://unpkg.com/@univerjs-pro/license/lib/umd/index.js"></script>
<script src="https://unpkg.com/@univerjs-pro/collaboration/lib/umd/index.js"></script>
<script src="https://unpkg.com/@univerjs-pro/collaboration-client/lib/umd/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@univerjs-pro/collaboration-client/lib/index.css">
<script src="https://unpkg.com/@univerjs-pro/live-share/lib/umd/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@univerjs-pro/live-share/lib/index.css">
<script src="https://unpkg.com/@univerjs-pro/print/lib/umd/index.js"></script>
<script src="https://unpkg.com/@univerjs-pro/sheets-print/lib/umd/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@univerjs-pro/sheets-print/lib/index.css">
<script src="https://unpkg.com/@univerjs-pro/exchange-client/lib/umd/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@univerjs-pro/exchange-client/lib/index.css">
<script src="https://unpkg.com/@univerjs-pro/sheets-exchange-client/lib/umd/index.js"></script>
<script src="https://unpkg.com/@univerjs-pro/engine-pivot/lib/umd/index.js"></script>
<script src="https://unpkg.com/@univerjs-pro/sheets-pivot/lib/umd/index.js"></script>
<script src="https://unpkg.com/@univerjs-pro/sheets-pivot-ui/lib/umd/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@univerjs-pro/sheets-pivot-ui/lib/index.css">
<script src="https://unpkg.com/@univerjs-pro/edit-history-viewer/lib/umd/index.js"></script>
<script src="https://unpkg.com/@univerjs-pro/edit-history-loader/lib/umd/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@univerjs-pro/edit-history-viewer/lib/index.css">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#app {
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
var {
UniverCore,
UniverDesign,
UniverEngineRender,
UniverEngineFormula,
UniverDocs,
UniverDocsUi,
UniverUi,
UniverSheets,
UniverSheetsUi,
UniverSheetsNumfmt,
UniverCollaboration,
UniverCollaborationClient,
UniverSheetsThreadComment,
UniverExchangeClient,
UniverFacade
} = window;
var { UniverSheetsFormulaPlugin } = UniverSheetsFormula;
var { UniverSheetsExchangeClientPlugin } = UniverSheetsExchangeClient;
var { UniverSheetsNumfmtPlugin } = UniverSheetsNumfmt;
var { UniverDocsPlugin } = UniverDocs;
var { UniverRenderEnginePlugin } = UniverEngineRender;
var { UniverFormulaEnginePlugin } = UniverEngineFormula;
var { UniverUIPlugin } = UniverUi;
var { UniverDocsUIPlugin } = UniverDocsUi;
var { UniverSheetsPlugin } = UniverSheets;
var { UniverSheetsUIPlugin } = UniverSheetsUi;
var { UniverSheetsPivotTablePlugin } = UniverSheetsPivot;
var { UniverSheetsPivotTableUIPlugin } = UniverSheetsPivotUi;
var { UniverEditHistoryLoaderPlugin } = UniverEditHistoryLoader;
var { UniverCollaborationPlugin } = UniverCollaboration;
var { UniverCollaborationClientPlugin } = UniverCollaborationClient;
var { UniverLiveSharePlugin } = UniverLiveShare;
var { UniverSheetsPrintPlugin } = UniverSheetsPrint;
var { UniverSheetsThreadCommentPlugin, IThreadCommentMentionDataService } = UniverSheetsThreadComment;
var { defaultTheme, greenTheme } = UniverDesign;
var { FUniver } = UniverFacade;
var { UniverExchangeClientPlugin }= UniverExchangeClient;
var {UniverLicensePlugin} = UniverLicense;
var {
UniverInstanceType,
Tools,
IUndoRedoService,
IAuthzIoService,
LocaleType,
Univer,
IConfigService
} = window.UniverCore;
</script>
<script>
// 你好，开发者，这是一个简单的示例，展示如何使用 Univer UMD 实现协作、实时共享、打印和导入导出功能
// 如果你想使用协作、实时共享、打印和交换功能，你需要配置 `universerEndpoint`
// `universerEndpoint` 是提供协作、实时共享、打印和交换服务的 Univer 后端服务器地址
// 你可以在自己的服务器上部署 Univer 服务器，详见部署指南：https://univer.ai/zh-CN/guides/sheets/server/docker
const universerEndpoint = 'localhost:8000';
// 协同插件从 URL 中获取 unit 参数，如果没有 unit 参数，则创建一个新的 unit
const url = new URL(window.location.href)
const unit = url.searchParams.get('unit')
if (unit) {
// 加载协作、打印、交换的国际化资源
Promise.all([
fetch('https://unpkg.com/@univerjs-pro/collaboration-client/lib/locale/zh-CN.json').then(res => res.json()),
fetch('https://unpkg.com/@univerjs-pro/sheets-print/lib/locale/zh-CN.json').then(res => res.json()),
fetch('https://unpkg.com/@univerjs-pro/exchange-client/lib/locale/zh-CN.json').then(res => res.json()),
fetch('https://unpkg.com/@univerjs-pro/edit-history-viewer/lib/locale/zh-CN.json').then(res => res.json()),
fetch('https://unpkg.com/@univerjs-pro/sheets-pivot/lib/locale/zh-CN.json').then(res => res.json()),
fetch('https://unpkg.com/@univerjs-pro/sheets-pivot-ui/lib/locale/zh-CN.json').then(res => res.json()),
]).then((langs) => {
setup(Tools.deepMerge(UniverUMD['zh-CN'],...langs));
})
} else {
const { UniverInstanceType } = window.UniverCore;
fetch(`http://${universerEndpoint}/universer-api/snapshot/${UniverInstanceType.UNIVER_SHEET}/unit/-/create`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
type: UniverInstanceType.UNIVER_SHEET,
name: 'New Sheet By Univer',
creator: 'user',
}),
}).then((response) => {
if (!response.ok) {
throw new Error('Failed to create new sheet')
}
return response.json()
}).then((data) => {
if (!data.unitID) {
throw new Error('create unit failed')
}
url.searchParams.set('unit', data.unitID)
url.searchParams.set('type', String(UniverInstanceType.UNIVER_SHEET))
window.location.href = url.toString()
}).catch((error) => {
console.error(error)
})
}
const setup = (locales) => {
var univer = new Univer({
theme: defaultTheme,
locale: LocaleType.ZH_CN,
locales:{
[LocaleType.ZH_CN]: locales,
},
override: [
[IAuthzIoService, null],
[IUndoRedoService, null]
]
});
univer.registerPlugin(UniverRenderEnginePlugin);
univer.registerPlugin(UniverDocsPlugin);
univer.registerPlugin(UniverFormulaEnginePlugin);
univer.registerPlugin(UniverSheetsFormulaPlugin);
univer.registerPlugin(UniverUIPlugin, {
container: "app",
});
univer.registerPlugin(UniverDocsUIPlugin);
univer.registerPlugin(UniverSheetsPlugin);
univer.registerPlugin(UniverSheetsUIPlugin);
const mockUser = {
userID: 'mockId',
name: 'MockUser',
avatar: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAInSURBVHgBtZU9TxtBEIbfWRzFSIdkikhBSqRQkJqkCKTCFkqVInSUSaT0wC8w/gXxD4gU2nRJkXQWhAZowDUUWKIwEgWWbEEB3mVmx3dn4DA2nB/ppNuPeWd29mMIPXDr+RxwtgRHeW6+guNPRxogqnL7Dwz9psJ27S4NShaeZTH3kwXy6I81dlRKcmRui88swdq9AcSFL7Buz1Vmlns64MiLsCjzwnIYHLH57tbfFbs7KRaXyEU8FVZofqccOfA5l7Q8LPIkGrwnb2RPNEXWFVMUF3L+kDCk0btDDAMzOm5YfAHDwp4tG74wnzAsiOYMnJ3GoDybA7IT98/jm5+JNnfiIzAS6LlqHQBN/i6b2t/cV1Hh6BfwYlHnHP4AXi5q/8kmMMpOs8+BixZw/Fd6xUEHEbnkgclvQP2fGp7uShRKnQ3G32rkjV1th8JhIGG7tR/JyjGteSOZELwGMmNqIIigRCLRh2OZIE6BjItdd7pCW6Uhm1zzkUtungSxwEUzNpQ+GQumtH1ej1MqgmNT6vwmhCq5yuwq56EYTbgeQUz3yvrpV1b4ok3nYJ+eYhgYmjRUqErx2EDq0Fr8FhG++iqVGqxlUJI/70Ar0UgJaWHj6hYVHJrfKssAHot1JfqwE9WVWzXZVd5z2Ws/4PnmtEjkXeKJDvxUecLbWOXH/DP6QQ4J72NS0adedp1aseBfXP8odlZFfPvBF7SN/8hky1TYuPOAXAEipMx15u5ToAAAAABJRU5ErkJggg==',
anonymous: false,
canBindAnonymous: false,
};
class CustomMentionDataService {
trigger = '@';
async getMentions (search) {
return [
{
id: mockUser.userID,
label: mockUser.name,
type: 'user',
icon: mockUser.avatar,
},
{
id: '2',
label: 'User2',
type: 'user',
icon: mockUser.avatar,
},
];
}
}
univer.registerPlugin(UniverSheetsThreadCommentPlugin, {
overrides: [[IThreadCommentMentionDataService, { useClass: CustomMentionDataService }]],
});
// 注册协同插件
univer.registerPlugin(UniverCollaborationPlugin);
univer.registerPlugin(UniverCollaborationClientPlugin, {
authzUrl: `http://${universerEndpoint}/universer-api/authz`,
snapshotServerUrl: `http://${universerEndpoint}/universer-api/snapshot`,
collabSubmitChangesetUrl: `http://${universerEndpoint}/universer-api/comb`,
collabWebSocketUrl: `http://${universerEndpoint}/universer-api/comb/connect`,
// 如果你使用了导入导出插件，需要配置以下参数
uploadFileServerUrl: `http://${universerEndpoint}/universer-api/stream/file/upload`,
signUrlServerUrl: `http://${universerEndpoint}/universer-api/file/{fileID}/sign-url`,
});
// 注册实时共享插件
univer.registerPlugin(UniverLiveSharePlugin)
// 注册打印插件
univer.registerPlugin(UniverSheetsPrintPlugin)
// 注册导入导出插件
univer.registerPlugin(UniverExchangeClientPlugin, {
uploadFileServerUrl: `http://${universerEndpoint}/universer-api/stream/file/upload`,
importServerUrl: `http://${universerEndpoint}/universer-api/exchange/{type}/import`,
exportServerUrl: `http://${universerEndpoint}/universer-api/exchange/{type}/export`,
getTaskServerUrl: `http://${universerEndpoint}/universer-api/exchange/task/{taskID}`,
signUrlServerUrl: `http://${universerEndpoint}/universer-api/file/{fileID}/sign-url`,
})
univer.registerPlugin(UniverSheetsExchangeClientPlugin)
}
</script>
</body>
</html>Univer 服务端
在前面的例子中我们已经接入 Univer 的服务端（Univer Server），这些功能包括：
- 导入导出
- 协同编辑
- Live Share
请参考 服务概述 以进一步了解 Univer 服务端。