文件比较
# 该示例主要演示文件比较功能。
# 代码演示
文件比较的流程类似于基础看图的流程, 区别如下:
| 基础看图 | 文件比较 | |
|---|---|---|
| 1 | ZwCloud2D.ZwEditor.setDocId('XXXXXXXXX') | ZwCloud2D.ZwEditor.setDocId('XXXXXXXXX') ZwCloud2D.ZwEditor.setCompareId('YYYYYYYYY') |
| 2 | ZwCloud2D.ZwEditor.load() | ZwCloud2D.ZwEditor.loadCompare() |
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<base href="/pages/" />
<title>Html Demo</title>
</head>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<script type="text/javascript" src="../assets/ZwCloud2DSDK/ZwCloud2D.js"></script>
<body id="wholeFrame">
<div id="container" style="width: 100vw; height: 100vh"></div>
<script type="module">
// 初始化配置
const initializeViewer = async () => {
try {
// 设置云服务连接配置
window.ZwCloud2D.setConnectUrl(process.env.HTML_APP_ZW_URL);
// 设置认证令牌
window.ZwCloud2D.setToken(process.env.HTML_APP_ZW_TOKEN);
// 初始化编辑器
await window.ZwCloud2D.ZwEditor.init(document.getElementById('container'));
} catch (error) {
console.error('初始化失败:', error);
// 可以添加错误处理逻辑
}
};
initializeViewer().then(() => {
// 从路由参数获取文档ID
const params = new URLSearchParams(location.search);
const docId = params.get('docId');
const compareId = params.get('compareId');
if (docId && compareId) {
// 配置要加载的文档
window.ZwCloud2D.ZwEditor.setDocId(docId);
// 配置要对比的文档
window.ZwCloud2D.ZwEditor.setCompareId(compareId);
// 加载文档
window.ZwCloud2D.ZwEditor.loadCompare();
}
});
</script>
</body>
</html>
