当设置body标签的color为red时，输入及粘贴table字符会变红

Richard.Huang · 屏幕录制2024-04-08 下午7.21.01.mov.zip

本帖最后由 Richard.Huang 于 2024-4-11 15:51 编辑

产品：SpreadJS
版本：V17

当设置body标签的样式后，会出现以下问题：
color:red； // 输入框及粘贴字符会变红
font-weight:normal； //粘贴表格时th不识别为粗体
font-size: 20px； // 粘贴后字体大小也为20px了

如图所示
image.png284540099.png

Richard.Huang · Richard.Huang

spreadjs666 发表于 2024-4-9 11:09
我通过copy事件的event内容捞取到的html中并没有自带body标签的内容，body标签是spreadJS自己加上去的吗 ...

您好，您可以监听粘贴事件来查看，而不是拷贝事件，当您粘贴HTML内容时，即使粘贴的原始内容并不包含`<body>`标签，您也可能会发现打印出来的HTML包含一个`<body>`标签。这是因为当HTML片段被插入到`clipboardData`对象中，它被当作一个完整的HTML文档来处理。为了确保这段HTML可以正确地被理解和渲染，浏览器会自动将其封装在一个隐式的`<html>`结构中，其中包括`<head>`和`<body>`等基础标签。

这个行为背后的主要理由是，HTML的规范要求HTML内容在解析时必须处于一个完整的文档结构中。因此，当您尝试从`clipboardData`获取`text/html`类型的数据时，即便原始粘贴内容不包含`<body>`标签，浏览器也会自动构造一个含有这些标准HTML结构的完整HTML文档。这样可以保证HTML片段的任何样式和结构特性在后续处理时都能保持一致和正确。

简而言之，这个行为是浏览器对HTML内容的一种普遍处理方式，以确保复制粘贴的HTML数据能以一种标准化和可预测的形式存在，使得开发者能够更容易地处理粘贴的HTML内容。

Richard.Huang · Richard.Huang

本帖最后由 Joestar.Xu 于 2024-4-24 14:17 编辑

您好，因为粘贴的内容中的html字符串也有body标签，这会造成样式的冲突，对于该问题您可以借助 !important 声明让dom中的规则更加优先，具体原因和做法可以参考这篇技术博客：https://gcdn.grapecity.com.cn/showtopic-199162-1-1.html
image.png410223693.png

spreadjs666 · spreadjs666

Richard.Huang 发表于 2024-4-9 09:50
您好，因为粘贴的内容中的html字符串也有body标签，这会造成样式的冲突，对于该问题您可以借助!import声明 ...

我通过copy事件的event内容捞取到的html中并没有自带body标签的内容，body标签是spreadJS自己加上去的吗？
image.png135774230.png

Richard.Huang · Richard.Huang

您好，请问楼主的问题是否得到解决，如果仍然存在问题，欢迎继续跟帖询问

spreadjs666 · spreadjs666

Richard.Huang 发表于 2024-4-11 15:52
您好，请问楼主的问题是否得到解决，如果仍然存在问题，欢迎继续跟帖询问

您好，上述问题已经解决了，但是发现复制表格到excel中th标签会默认居中，请问要如何消除这个默认效果呢？

Richard.Huang · Richard.Huang

spreadjs666 发表于 2024-4-11 16:16
您好，上述问题已经解决了，但是发现复制表格到excel中th标签会默认居中，请问要如何消除这个默认效果呢 ...

您好，能否提供一个可供我们复现的demo呢，或者说我应该怎么复现您的这个问题呢？

Richard.Huang · Richard.Huang

您好，请问楼主的问题是否得到解决，如果仍然存在问题，欢迎继续跟帖询问

spreadjs666 · spreadjs666

Richard.Huang 发表于 2024-4-11 17:32
您好，能否提供一个可供我们复现的demo呢，或者说我应该怎么复现您的这个问题呢？

https://www.w3school.com.cn/tiy/t.asp?f=tags_table 复制这个里面的内容到spread中，表头被自动识别为了居中对齐。excel中粘贴是左对齐。

Richard.Huang · Richard.Huang

spreadjs666 发表于 2024-4-16 11:43
https://www.w3school.com.cn/tiy/t.asp?f=tags_table 复制这个里面的内容到spread中，表头被自动识别为 ...

您好，我在SpreadJS和Excel中分别进行了测试，效果一致

两者一致.gif876370849.png

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

[已处理] 当设置body标签的color为red时，输入及粘贴table字符会变红

最佳答案

10 个回复

SpreadJS 认证

SpreadJS 高级认证