自定义css样式与粘贴内容字体冲突

收藏

本帖最后由 Richard.Huang 于 2023-12-4 14:41 编辑

背景
在本地Excel中将数据通过Ctrl+C快捷键进行复制，然后在SpreadJS中用Ctrl+V进行粘贴，这是很多用户常常会用到的操作，这也是再平凡不过的操作。在很多多时候是十分方便的。但是，最近有用户反馈，我在本地复制了一个文本，粘贴到SpreadJS中后，文本的字体发生了改变：
image.png838484496.png

原因
首先遇到字体样式变化别慌，通过font方法先把SpreadJS中你粘贴的内容的字体再拿出来看一下和原本的内容的差别，当然为了对比，我们可以将上面的操作也在官网的在线表格编辑器中重复一遍：https://demo.grapecity.com.cn/SpreadJS/WebDesigner/
image.png133175963.png

我们发现，我们的文档中粘贴的内容字体多了tabular-nums的字样，为啥会这样呢？为了快速找到这个tabular-nums的实现，我们可以借助Ctrl+F在我们的工程文件中进行搜索，最终定位到我们的css样式：
image.png400616149.png

除此以外没有别的地方存在该样式了，但是又有新的疑问产生了，我css样式应用的范围是body类，和我粘贴内容有啥关系？
我们可以借助ClipboardPasted事件来进一步探讨：https://demo.grapecity.com.cn/sp ... nts#clipboardpasted
我们可以在我们的工程文件中对该事件进行监听，并打印粘贴的内容：

spread.bind(GC.Spread.Sheets.Events.ClipboardPasted, function (sender, args) {
console.log("剪贴板文本字符串", args.pasteData.text);
console.log("剪贴板的html字符串", args.pasteData.html);
});

复制代码

最终结果如下：

我们发现text仅仅是粘贴的文本内容，而html中包含着这个字符串的字体样式大小颜色等其他信息。我们再使用Ctrl+F搜索发现，我们要粘贴的内容，正好就被这个body标签包裹了，如此一来造成整个问题的原因有了眉目，就是被我们设置的css样式形成了冲突。

解决办法
font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小
font-variant 属性主要用于定义小型大写字母文本。如果我们没有这方面的需要，可以将该样式注释掉来解决该问题：
image.png119852294.png

或者我们也可以借助!import声明让dom中的规则更加优先也可以解决该问题：

<div id="gc-designer-container"
style="width:80%; height:835px;border: 1px solid gray;font-variant: normal !important;"></div>

复制代码

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

自定义css样式与粘贴内容字体冲突

0 个回复

SpreadJS 认证

SpreadJS 高级认证