feat: integrate luckysheet inline and fullscreen
This commit is contained in:
liaibo
@@ -0,0 +1,251 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="zh">
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
|
||||
<title>Luckysheet</title>
|
||||
<link rel="stylesheet" href="./plugins/css/pluginsCss.css" />
|
||||
<link rel="stylesheet" href="./plugins/plugins.css" />
|
||||
<link rel="stylesheet" href="./css/luckysheet.css" />
|
||||
<link rel="stylesheet" href="./assets/iconfont/iconfont.css" />
|
||||
<script src="./plugins/js/plugin.js"></script>
|
||||
|
||||
<!-- rollup luckysheet.js -->
|
||||
<script src="./luckysheet.umd.js"></script>
|
||||
<script src="./demoData/sheetVchart.js"></script>
|
||||
<script src="./demoData/sheetChart.js"></script>
|
||||
<script src="./demoData/sheetCell.js"></script>
|
||||
<script src="./demoData/sheetPicture.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="luckysheet" style="margin: 0px; padding: 0px; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px"></div>
|
||||
|
||||
<script>
|
||||
// 公共配置项
|
||||
const commonOptions = {
|
||||
container: "luckysheet",
|
||||
lang: "zh",
|
||||
// showinfobar: false, // 隐藏信息栏
|
||||
// showlogo: false, // 隐藏logo
|
||||
plugins: [{ name: "vchart" }, { name: "chart" }],
|
||||
data: [sheetCell],
|
||||
|
||||
// 打印像素比，设置越高，越清晰
|
||||
printDevicePixelRatio: 4,
|
||||
|
||||
// 图片显示方式
|
||||
imageMode: "cell", // 'cell' | 'float'
|
||||
|
||||
// 自定义快捷键
|
||||
customShortcutKeys: [
|
||||
{
|
||||
key: 83,
|
||||
ctrl: true,
|
||||
callback: (e) => {
|
||||
console.log("Ctrl S");
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 80,
|
||||
ctrl: true,
|
||||
callback: (e) => {
|
||||
luckysheet.print("sheet");
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
// 自定义右键菜单
|
||||
cellRightClickConfig: {
|
||||
// copy: false,
|
||||
copyAs: false,
|
||||
// paste: false,
|
||||
hideColumn: false,
|
||||
columnWidth: false,
|
||||
clear: false,
|
||||
matrix: false,
|
||||
sort: false,
|
||||
filter: false,
|
||||
chart: false,
|
||||
image: false,
|
||||
link: false,
|
||||
data: false,
|
||||
cellFormat: false,
|
||||
customs: [
|
||||
{
|
||||
title: "test",
|
||||
onClick: function (clickEvent, event, params) {
|
||||
console.log("function test click", clickEvent, event, params);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 项目菜单
|
||||
menuHandler: {
|
||||
// 隐藏内置菜单
|
||||
// hideDefaultMenu: ['exportFile', 'importFile'],
|
||||
// 自定义
|
||||
customs: [
|
||||
// 分割线
|
||||
{
|
||||
order: 0,
|
||||
label: "自定义菜单",
|
||||
value: "newFile",
|
||||
callback: () => {
|
||||
console.log("==> 自定义菜单");
|
||||
},
|
||||
},
|
||||
{
|
||||
order: 0,
|
||||
value: "divider",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// loading 样式
|
||||
loading: {
|
||||
image: () => {
|
||||
return `<svg viewBox="25 25 50 50" class="circular">
|
||||
<circle cx="50" cy="50" r="20" fill="none"></circle>
|
||||
</svg>`;
|
||||
},
|
||||
imageClass: "loadingAnimation",
|
||||
},
|
||||
};
|
||||
|
||||
// 处理协同图片上传
|
||||
async function uploadImage(file, serviceServer) {
|
||||
// 此处拿到的是上传的 file 对象，进行文件上传 ，配合 node 接口实现
|
||||
const formData = new FormData();
|
||||
formData.append("image", file);
|
||||
|
||||
// 结合 Ajax 实现图片上传
|
||||
return new Promise((resolve, reject) => {
|
||||
$.ajax({
|
||||
url: `${serviceServer}/uploadImage`,
|
||||
type: "POST",
|
||||
data: formData,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: function (res) {
|
||||
if (res.code === 200) resolve(res.url);
|
||||
else reject("image upload error");
|
||||
},
|
||||
error: function (err) {
|
||||
reject("image upload error");
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 处理上传图片的地址
|
||||
function imageUrlHandle(url, serviceServer) {
|
||||
// 已经是 // http data 开头则不处理
|
||||
if (/^(?:\/\/|(?:http|https|data):)/i.test(url)) return url;
|
||||
// 不然拼接服务器路径
|
||||
return serviceServer + url;
|
||||
}
|
||||
|
||||
// 动态获取 luadUrl
|
||||
function getLoadUrl(serviceServer, currentBranch, gridkey) {
|
||||
return `${serviceServer}${currentBranch === "master-alpha" ? "/" : "/luckysheet/"}loadSheetData?gridkey=${gridkey}`;
|
||||
}
|
||||
|
||||
// 动态获取 updateUrl
|
||||
function getUpdateUrl(collabrationServer, currentBranch, userid, username, gridkey) {
|
||||
return `${collabrationServer}
|
||||
${currentBranch === "master-alpha" ? "?" : "/luckysheet?"}
|
||||
type=luckysheet&userid=${userid}&username=${username}&gridkey=${gridkey}`;
|
||||
}
|
||||
|
||||
// 根据协同与否，动态获取配置
|
||||
function getOptions(
|
||||
isCollabration,
|
||||
requestHeaders = {},
|
||||
serviceServer,
|
||||
collabrationServer,
|
||||
currentBranch,
|
||||
userid,
|
||||
username,
|
||||
gridkey
|
||||
) {
|
||||
// 如果没有开启协同，则直接返回基础配置
|
||||
if (!isCollabration) return Object.assign({}, commonOptions, { requestHeaders });
|
||||
|
||||
return Object.assign({}, commonOptions, {
|
||||
// 如果是 master-vue 的话，还需要添加自定义请求头，请检查合并属性哈，不然容易遗漏属性
|
||||
requestHeaders:
|
||||
currentBranch === "master-vue"
|
||||
? {
|
||||
"enable-pass-token": true, // 是否允许跳过 token 验证
|
||||
...requestHeaders,
|
||||
}
|
||||
: requestHeaders,
|
||||
allowUpdate: true, // 配置协同功能
|
||||
loadUrl: getLoadUrl(serviceServer, currentBranch, gridkey),
|
||||
updateUrl: getUpdateUrl(collabrationServer, currentBranch, userid, username, gridkey), // 协同服务转发服务
|
||||
|
||||
// 如果配置了协同，请配置图片处理函数，避免base64图片过大导致图片无法显示
|
||||
uploadImage: (file) => uploadImage(file, serviceServer),
|
||||
imageUrlHandle: (url) => imageUrlHandle(url, serviceServer),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 页面初始化相关工作
|
||||
*/
|
||||
|
||||
$(function () {
|
||||
/**
|
||||
* -------------------------------------------------------
|
||||
* ⚠️ 注意：请严格按照下列步骤进行配置，否则会导致无法协同 ⚠️
|
||||
* -------------------------------------------------------
|
||||
*/
|
||||
|
||||
// 1. 请明确协同服务地址
|
||||
const collabrationServer = "ws://localhost:9000";
|
||||
|
||||
// 2. 请明确业务服务地址
|
||||
const serviceServer = "http://localhost:9000";
|
||||
|
||||
// 3. 请明确 `luckysheet-crdt` 项目目前所在的分支，因为 master-alpha 与 master-vue 分支所在的服务端不尽相同，`master-vue` 分支需要校验 token
|
||||
const currentBranch = "master-alpha"; // "master-vue" | "master-alpha"
|
||||
|
||||
// 4. 定义 userid 内部 userid 可随机生成
|
||||
const userid = Math.random().toString(16).slice(2, 8);
|
||||
|
||||
// 5. username 字段 仅用于显示 xxx正在编辑 (对中文进行编码传输，避免乱码)
|
||||
const username = encodeURIComponent(`用户_${userid}`);
|
||||
|
||||
// 6. 这个是协同的文件 gridKey 请真实的设置为数据库的 key，不然会提示协同服务异常 是真实数据库表的 workerbooks gridKey 字段
|
||||
const gridkey = "705abf334c946bf5545ce04f586eb42e";
|
||||
|
||||
// 7. 明确是否需要协同功能
|
||||
const isCollabration = false;
|
||||
|
||||
// 8. 是否需要携带其他 request headers
|
||||
const requestHeaders = {
|
||||
// "Custom-userid": userid,
|
||||
};
|
||||
|
||||
// 9. 根据是否需要协同功能，动态获取配置项
|
||||
const options = getOptions(
|
||||
isCollabration,
|
||||
requestHeaders,
|
||||
serviceServer,
|
||||
collabrationServer,
|
||||
currentBranch,
|
||||
userid,
|
||||
username,
|
||||
gridkey
|
||||
);
|
||||
|
||||
// 10. 创建表格
|
||||
luckysheet.create(options);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user