复制粘贴快捷键与clipboardPaste表现不一致

Ellia.Duan

本帖最后由 Richard.Huang 于 2024-5-29 12:02 编辑

产品：SpreadJS
版本：V17

复制粘贴快捷键与clipboardPaste表现不一致，快捷键为正常内容，clipboardPaste会将单元格中的换行识别为多个单元格。

源数据：
https://docs.qq.com/sheet/DR2F2cGlySW1WalNY?tab=BB08J2

快捷键粘贴：
image.png176077574.png

cmd：clipboardPaste粘贴
image.png348197631.png

spread.commandManager().execute({
cmd: "clipboardPaste",
sheetName: "Sheet1",
pastedRanges: [
{
row: 1,
col: 1,
rowCount: 6,
colCount: 1,
},
],
isCutting: false,
clipboardText: `1、范德萨发撒
2、范德萨发撒地方撒
1、发撒发大发的
2、范德萨发撒地方
`,
clipboardHtml: `<meta charset='utf-8'><html xmlns:x="tencent"><meta charset="utf-8"><style type='text/css'></style><body><table style="border-collapse:collapse;table-layout: fixed;width: 0;" selectType="cells"><col width="101" style="width: 101px;"><tr height="24" style="mso-height-source:auto;height:24px;" ><td style="font-size:10pt;border-left: .5pt solid #000000;border-top: .5pt solid #000000;border-right: .5pt solid #000000;border-bottom: .5pt solid #000000;vertical-align:middle;text-align:left;white-space:normal;width: 101px;" width="101" >1、范德萨发撒<br style="mso-data-placement:same-cell;">2、范德萨发撒地方撒</td></tr><tr height="24" style="mso-height-source:auto;height:24px;" ><td style="font-size: 10pt;width: 101px;" width="101" ></td></tr><tr height="24" style="mso-height-source:auto;height:24px;" ><td style="font-size: 10pt;width: 101px;" width="101" ></td></tr><tr height="24" style="mso-height-source:auto;height:24px;" ><td style="font-size: 10pt;width: 101px;" width="101" ></td></tr><tr height="24" style="mso-height-source:auto;height:24px;" ><td style="font-size:10pt;vertical-align:bottom;text-align:left;white-space:normal;width: 101px;" width="101" >1、发撒发大发的<br style="mso-data-placement:same-cell;">2、范德萨发撒地方</td></tr><tr height="24" style="mso-height-source:auto;height:24px;" ><td data-online-sheet-type='cell-image' tdocs-image-url='https://docimg10.docs.qq.com/image/AgAABuYP8cYKRZ1B9-FCbroSyjpkMF84.png?w=48&h=48' data-online-sheet-width='136' data-online-sheet-height='136' style="font-size:10pt;vertical-align:middle;text-align:left;white-space:no-wrap;width: 101px;" width="101" ><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAfRJREFUaEPtmc1xwjAQhVc9pIfQQw7BFQAdhBSRK/Y1RYR0AFSAc0gP0EN6UCJ5zAhZsrTWyrId+wAz4J/37Vut1hKDkR9s5PphBkjtIJ0Dh5elhGFsp0BVvwGU8pOzL/m9+cipwMMBDq85MP78J7IW66+NsyIUpjtAJVyNtr9w/cwAEDyASBXGzt3VtlzZAQQHQBl1GwcSwh+gD/E1FALCD6BP8UgIN0AK8QiIdoCU4m8QPIPNZzWPGI52gOOWR6k22Juu91addoAhRN8jlewAQ4l+DWFxwQxAEP3lwwLOT2/y8cX1BPnlhE2c+/MtpdUMQBD9fLGC3eOKDkA0hOt9pkdhTAAAvFmRmgAE6SOiFMGBCQAY0qjpwHErOk18b68lZxQH/gsAyewbyQEAbT4wpdDoAeYxEK2MphrE2fc7lD+XsFZCXG1oJwwTWcSX9lCE0QMYOlJbLxQ8kNVulCyFvAEI+iHyeQDVTotcDWypVQASB1AvNAKAwIXQMXu7vmWdaMIv9dKFAZRUxyrdxBe26iRMMR4810fdDqSA8BQvpPkD9FWZEOLxALEhDKsOrlKMc0C9G+W4QEZdldEdIHxslHLXMnDHMhxAd0Umpty1FMf9Nqvs6Xkh/2lZMnelDa0DmKdFOJfWgQgCXbecAVwRiv3/L47oKUCUA2Z8AAAAAElFTkSuQmCC" tdocs-image-url="https://docimg10.docs.qq.com/image/AgAABuYP8cYKRZ1B9-FCbroSyjpkMF84.png?w=48&h=48" tencent-sheet-cell-img='true'></td></tr></table></body></html>`,
pasteOption: GC.Spread.Sheets.ClipboardPasteOptions.all,
});

复制代码

Ellia.Duan · Ellia.Duan

本帖最后由 Ellia.Duan 于 2024-5-16 17:53 编辑

您好，经过调研，问题应该在这里clipboardText，

在楼上提供的html文件中，添加如下代码

spread.commandManager().addListener("action_listener", function (args) {
if (args.command && args.command.cmd) {
console.log(args.command.cmd, args.command);
}
});

复制代码

此时粘贴腾讯文档这个单元格的内容：
image.png500800475.png

观察控制台中的clipboardText为
image.png46436156.png

然后，注释掉您提供的相关代码，只保留下面的代码

spread.commandManager().addListener("action_listener", function (args) {
if (args.command && args.command.cmd) {
console.log(args.command.cmd, args.command);
}
});

复制代码

再次复制，然后粘贴
观察控制台中clipboardText 为"\"1、第一行文本\n2、第二行文本\""
image.png452460631.png

最后，将您的代码修改为下图所示的代码，粘贴结果为一个单元格。
image.png240278929.png

所以，在您的代码基础上，还需要对text进行再次解析。

Ellia.Duan · Ellia.Duan

本帖最后由 Ellia.Duan 于 2024-5-15 18:02 编辑

您好，使用您的代码，粘贴后确实如您所说，在不同单元格中进行了粘贴。我将深入的调研下此问题。
同时，想问下，您的clipboardHtml和clipboardText是从哪里解析的。

同时，做了一下测试，在一个单元格中，输入多行字符，此时监听事件ClipboardPasted

sheet.bind(GC.Spread.Sheets.Events.ClipboardPasted, function (sender, args) {
console.log(args)
});

复制代码

复制控制台中的pasteData里面的html和text到您的命令中的clipboardHtml和clipboardText
此时，执行命令，没有复现此问题。
过程如下：
复制粘贴.gif

结果如下：

、

spreadjs666 · spreadjs666

本帖最后由 spreadjs666 于 2024-5-15 18:17 编辑

Ellia.Duan 发表于 2024-5-15 17:58
您好，使用您的代码，粘贴后确实如您所说，在不同单元格中进行了粘贴。我将深入的调研下此问题。
同时，想 ...

您好，clipboardHtml和clipboardText是从源数据中执行复制，在浏览器剪切板中自主获取的。
背景：
我们在做外部复制粘贴的打通，因此会从电脑剪切板中获取到clipboardHtml和clipboardText，再用cmd：clipboardPaste进行粘贴，获取text和html的具体方法是
spread.commandManager().setShortcutKey(null, GC.Spread.Commands.Key.v, false, false, false, true);
document.addEventListener('paste', (e)=> {
   let textItem, htmlItem, imageItem;
  let items = e.clipboardData.items;
  for (var i = 0;i< items.length;i++) {
let item = items;
if (item.type === "image/png") {
   imageItem = item
} else if (item.type === "text/html") {
   htmlItem = item;
} else if (item.type === "text/plain") {
   textItem = item;
}
  }  }, true);

然后使用
htmlItem.getAsString((html)=> {
   console.log('Html:', html, new DOMParser().parseFromString(html, 'text/html'));
})
textItem.getAsString((html)=> {
   console.log('text:', html);
})
进行获取的。

这项需求已经开发至中后期，今天测试的时候发现了该问题，由于所有粘贴最终调用的均是此cmd，因此比较紧急，期望您能优先处理，十分感谢。

spreadjs666 · spreadjs666

spreadjs666 发表于 2024-5-15 18:13
您好，clipboardHtml和clipboardText是从源数据中执行复制，在浏览器剪切板中自主获取的。
背景：
我们 ...

如果有临时可以规避此问题的方法也请告知下，十分感谢。

Ellia.Duan · Ellia.Duan

您好，是否漏发了代码，按照您贴出的代码，在您的源数据进行粘贴后，监听到粘贴事件，此时获取到的数据长度是0 ，并没有解析数据
image.png219220885.png

spreadjs666 · spreadjs666

本帖最后由 spreadjs666 于 2024-5-16 10:55 编辑

Ellia.Duan 发表于 2024-5-16 09:40
您好，是否漏发了代码，按照您贴出的代码，在您的源数据进行粘贴后，监听到粘贴事件，此时获取到的数据长度 ...

编辑器有点儿问题，let item = items【i】;中的【i】自动消失了

spread.commandManager().setShortcutKey(null, GC.Spread.Commands.Key.v, false, false, false, true);

document.addEventListener('paste', (e)=> {

   let textItem, htmlItem, imageItem;

  let items = e.clipboardData.items;

console.log(items);

  for (var i = 0;i< items.length;i++) {

let item = items[i];

   console.log(item)

if (item.type === "image/png") {

   imageItem = item

} else if (item.type === "text/html") {

   htmlItem = item;

} else if (item.type === "text/plain") {

   textItem = item;

}



  } htmlItem.getAsString((html)=> {

   console.log('Html:', html, new DOMParser().parseFromString(html, 'text/html'));

})

textItem.getAsString((html)=> {

   console.log('text:', html);

}) }, true);
复制代码

Ellia.Duan · Ellia.Duan

您好，使用您提供的代码，复制您提供的源数据，还是没有复现问题，如下图所示：
复制粘贴3.gif

测试代码如下：

spreadjs666 · spreadjs666

Ellia.Duan 发表于 2024-5-16 14:39
您好，使用您提供的代码，复制您提供的源数据，还是没有复现问题，如下图所示：

您好，您给出的代码无法执行，我刚修改了一下。
我是用的是Mac电脑，chrome浏览器，录屏如附件所示，辛苦查看。

Ellia.Duan · Ellia.Duan

本帖最后由 Ellia.Duan 于 2024-5-16 16:38 编辑

您好，根据您的视频以及提供的代码确认：
复制您的源数据后，打开测试demo ,此时粘贴，会出现粘贴为多个单元格的情况，我将深入调研此问题。待有进展，会及时联系您。

同时，发现在SpreadJS/Ms Excel 中复制一个多行单元格，均不会出现此问题。似乎和您使用的腾讯文档有关。
如下动图所示：
腾讯文档.gif

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

[已处理] 复制粘贴快捷键与clipboardPaste表现不一致

最佳答案

13 个回复

SpreadJS 认证

SpreadJS 高级认证