spreadjs 换行问题（SJS-4589）

收藏

本帖最后由 Derrick.Jiao 于 2022-8-1 09:44 编辑

上次的问题 spreadjs 自定义 cellType 问题https://gcdn.grapecity.com.cn/fo ... 99307&fromuid=63067
(出处: 葡萄城产品技术社区)

针对spreadjs 换行做了cellType 更换，但是者只针对图通文本，如果要修改富文本的格式要怎么处理

Derrick.Jiao · Derrick.Jiao

你好，富文本换行可以参考附件的demo通过/n/r换行。若仍未符合需求，可以提供对应demo以及描述详细需求，这边来做详细调研。

浩 · 浩

Derrick.Jiao 发表于 2022-7-14 14:52
你好，富文本换行可以参考附件的demo通过/n/r换行。若仍未符合需求，可以提供对应demo以及描述详细需求，这 ...

/******************************** 单元格文本换行,重写 Tex 的 paint 方法 ********************************/
function AutoWrapTextCellType() {
}
AutoWrapTextCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
AutoWrapTextCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
ctx.font = style.font;
value = wrapString(ctx, value, w - 2);
GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, [ctx, value, x, y, w, h, style, context]);
};
function wrapString(c, str, maxWidth) {
if(typeof str == 'object' && str['richText']){
return wrapRichTextString(c, str, maxWidth);
}
return wrapTextString(c, str, maxWidth)
}
/**
* 对普通文本进行换行
* @param c
* @param str
* @param maxWidth
* @returns {string|*}
*/
function wrapTextString(c, str, maxWidth){
let width = c.measureText(str).width;
if (width <= maxWidth) return str;
const len = str.length;
let newStrList = [];
let index = 0;
for (let i = 0; i < len; i++) {
// 临时拼接字符串
let _newStr = newStrList[index] + str[i];
// 临时拼接字符串的长度
let newWidth = c.measureText(_newStr).width;
// 初始化数组
if (!newStrList[index]) newStrList[index] = '';
// 长度判断
if (newWidth >= maxWidth) { // 长度超过,换行
newStrList[index + 1] = newStrList[index].substr(newStrList[index].length - 1) + str[i];
newStrList[index] = newStrList[index].substr(0, newStrList[index].length - 1);
index++;
} else {
newStrList[index] = newStrList[index] + str[i];
}
}
return newStrList.join('\r\n');
}
/**
* 对富文本进行换行
* @param c
* @param str
* @param maxWidth
* @returns {*}
*/
function wrapRichTextString(c, str, maxWidth){
const richText = str['richText'];
const newRichText = [];
// 之前部分遗留的字符串
let prevStr = '';
// 需要测量长度的字符串
let tmpStr = '';
let index = 0;
for (let i = 0; i < richText.length; i++) {
const text = richText[i]['text'];
const style = richText[i]['style'];
const len = text.length;
for (let j = 0; j < len; j++) {
// 临时拼接字符串
let _tmpStr = tmpStr + text[j];
// 临时拼接字符串的长度上个部分遗留的+当前拼接的
let newWidth = c.measureText(prevStr+_tmpStr).width;
// 长度判断
if (newWidth >= maxWidth) { // 长度超过,换行
newRichText[index] = {
text : tmpStr,
style: style,
}
index++;
newRichText[index] = {
text : '\r\n',
style: style,
}
index++;
// 记录当前字符,并将之前部分的记录清空
tmpStr = text[j];
prevStr = '';
} else {
tmpStr = _tmpStr;
}
}
// 每一部分结束后,将剩余的该部分单独组成一个完成的部分,并记录到prevStr
newRichText[index] = {
text : tmpStr,
style: style,
}
index++;
prevStr = prevStr + tmpStr;
tmpStr = '';
}
str['richText'] = newRichText
return str;
}

复制代码

这是换行的cellType，spreadjs并不识别

浩 · 浩

Derrick.Jiao 发表于 2022-7-14 14:52
你好，富文本换行可以参考附件的demo通过/n/r换行。若仍未符合需求，可以提供对应demo以及描述详细需求，这 ...

{"richText":[{"text":"该水样所检项目中肉眼可见物、耗氧量（COD","style":{"font":"14.7px 宋体","foreColor":"Text 1 0","textDecoration":0}},{"text":"Mn","style":{"vertAlign":2,"font":"14.7px 宋体","foreColor":"Text 1 0","textDecoration":0}},{"text":"法，以O","style":{"font":"14.7px 宋体","foreColor":"Text 1 0","textDecoration":0}},{"text":"2","style":{"vertAlign":2,"font":"14.7px 宋体","foreColor":"Text 1 0","textDecoration":0}},{"text":"计）、总大肠菌群、菌落总数、浑浊度检测结果超《生活饮用水卫生标准》（GB 5749-2006）标准要求，其它项目检测结果均符合标准要求。","style":{"font":"14.7px 宋体","foreColor":"Text 1 0","textDecoration":0}}],"text":"该水样所检项目中肉眼可见物、耗氧量（CODMn法，以O2计）、总大肠菌群、菌落总数、浑浊度检测结果超《生活饮用水卫生标准》（GB 5749-2006）标准要求，其它项目检测结果均符合标准要求。"}

复制代码

这是转换之前的richText

浩 · 浩

Derrick.Jiao 发表于 2022-7-14 14:52
你好，富文本换行可以参考附件的demo通过/n/r换行。若仍未符合需求，可以提供对应demo以及描述详细需求，这 ...

{"richText":[{"text":"该水样所检项目中肉眼可见物、耗氧量（COD","style":{"font":"14.7px 宋体","foreColor":"Text 1 0","textDecoration":0}},{"text":"Mn","style":{"vertAlign":2,"font":"14.7px 宋体","foreColor":"Text 1 0","textDecoration":0}},{"text":"法，以O","style":{"font":"14.7px 宋体","foreColor":"Text 1 0","textDecoration":0}},{"text":"2","style":{"vertAlign":2,"font":"14.7px 宋体","foreColor":"Text 1 0","textDecoration":0}},{"text":"计）、总大肠菌群、菌落总数、浑浊度检","style":{"font":"14.7px 宋体","foreColor":"Text 1 0","textDecoration":0}},{"text":"\r\n","style":{"font":"14.7px 宋体","foreColor":"Text 1 0","textDecoration":0}},{"text":"测结果超《生活饮用水卫生标准》（GB 5749-2006）标准要求，其它项目检测结果均符合标准要求","style":{"font":"14.7px 宋体","foreColor":"Text 1 0","textDecoration":0}},{"text":"\r\n","style":{"font":"14.7px 宋体","foreColor":"Text 1 0","textDecoration":0}},{"text":"。","style":{"font":"14.7px 宋体","foreColor":"Text 1 0","textDecoration":0}}],"text":"该水样所检项目中肉眼可见物、耗氧量（CODMn法，以O2计）、总大肠菌群、菌落总数、浑浊度检测结果超《生活饮用水卫生标准》（GB 5749-2006）标准要求，其它项目检测结果均符合标准要求。"}

复制代码

这是转换之后的richText

浩 · 浩

Derrick.Jiao 发表于 2022-7-14 14:52
你好，富文本换行可以参考附件的demo通过/n/r换行。若仍未符合需求，可以提供对应demo以及描述详细需求，这 ...

最终效果并没有变化

Derrick.Jiao · Derrick.Jiao

浩发表于 2022-7-14 17:30
最终效果并没有变化

这是我测试的效果，在添加“/n/r”处实现了换行。

浩 · 浩

Derrick.Jiao 发表于 2022-7-14 18:14
这是我测试的效果，在添加“/n/r”处实现了换行。

直接写入是可以的，但是我这里还使用了自定义单元格类型，重写了paint方法，兼容自动换行

function AutoWrapTextCellType() {
}
AutoWrapTextCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
AutoWrapTextCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
ctx.font = style.font;
value = wrapString(ctx, value, w - 2);
GC.Spread.Sheets.CellTypes.Text.prototype.paint.apply(this, [ctx, value, x, y, w, h, style, context]);
};
function wrapString(c, str, maxWidth) {
if($.common.isNotEmpty(str) && typeof str == 'object' && str['richText']){
// return wrapRichTextString(c, str, maxWidth);
return str;
}
return wrapTextString(c, str, maxWidth)
}
/**
* 对普通文本进行换行
* @param c
* @param str
* @param maxWidth
* @returns {string|*}
*/
function wrapTextString(c, str, maxWidth){
let width = c.measureText(str).width;
if (width <= maxWidth) return str;
const len = str.length;
let newStrList = [];
let index = 0;
for (let i = 0; i < len; i++) {
// 临时拼接字符串
let _newStr = newStrList[index] + str[i];
// 临时拼接字符串的长度
let newWidth = c.measureText(_newStr).width;
// 初始化数组
if (!newStrList[index]) newStrList[index] = '';
// 长度判断
if (newWidth >= maxWidth) { // 长度超过,换行
newStrList[index + 1] = newStrList[index].substr(newStrList[index].length - 1) + str[i];
newStrList[index] = newStrList[index].substr(0, newStrList[index].length - 1);
index++;
} else {
newStrList[index] = newStrList[index] + str[i];
}
}
return newStrList.join('\r\n');
}
/**
* 对富文本进行换行
* @param c
* @param str
* @param maxWidth
* @returns {*}
*/
function wrapRichTextString(c, str, maxWidth){
const richText = str['richText'];
const newRichText = [];
// 之前部分遗留的字符串
let prevStr = '';
// 需要测量长度的字符串
let tmpStr = '';
let index = 0;
for (let i = 0; i < richText.length; i++) {
const text = richText[i]['text'];
const style = richText[i]['style'];
const len = text.length;
for (let j = 0; j < len; j++) {
// 临时拼接字符串
let _tmpStr = tmpStr + text[j];
// 临时拼接字符串的长度上个部分遗留的+当前拼接的
let newWidth = c.measureText(prevStr+_tmpStr).width;
// 长度判断
if (newWidth >= maxWidth) { // 长度超过,换行
newRichText[index] = {
text : tmpStr,
style: style,
}
index++;
newRichText[index] = {
text : '\r\n',
style: style,
}
index++;
// 记录当前字符,并将之前部分的记录清空
tmpStr = text[j];
prevStr = '';
} else {
tmpStr = _tmpStr;
}
}
// 每一部分结束后,将剩余的该部分单独组成一个完成的部分,并记录到prevStr
newRichText[index] = {
text : tmpStr,
style: style,
}
index++;
prevStr = prevStr + tmpStr;
tmpStr = '';
}
str['richText'] = newRichText
console.log(JSON.stringify(str))
return str;
}

复制代码

Derrick.Jiao · Derrick.Jiao

浩发表于 2022-7-21 11:29
直接写入是可以的，但是我这里还使用了自定义单元格类型，重写了paint方法，兼容自动换行

由于上面提供的代码这边无法直接复现，请在附件的demo中复现此问题。并且，详细描述想要实现的效果，也就是具体需要在哪个位置进行换行。这样我们这边就可以直接根据需求来调整提供过来的demo。

浩 · 浩

Derrick.Jiao 发表于 2022-7-21 17:46
由于上面提供的代码这边无法直接复现，请在附件的demo中复现此问题。并且，详细描述想要实现的效果，也就 ...

这是demo，可以发现换行位置和console输出的换行位置完全不一致

		自动登录	找回密码
密码			立即注册

[已支持] spreadjs 换行问题（SJS-4589）

12 个回复

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证