1 year ago
#387957
Hiroshi H
The value obtained by Async Clipboard API is different from the value obtained from PasteEvent
The content obtained by using the Async Clipboard API and the content obtained by pasting the data copied from Excel with Ctrl + V are different.
Below is the code using the AsyncClipboard API,
//
// Triggered from any events other than "paste"
//
const readData = await navigator.clipboard.read();
for (const one of readData) {
if (one.types.includes('text/html')) {
const blobHtml = await one.getType('text/html')
const html = await blobHtml.text();
console.log(html);
}
}
//// old code
//const html = await navigator.clipboard.read().then(async (data) => {
// for (const one of data) {
// if (one.types.includes('text/html')) {
// const blobHtml = await one.getType('text/html')
// return await blobHtml.text();
// }
// }
// return null;
//});
//
//console.log(html);
And here is the code for the paste event,
document.getElementById('xxx').addEventListener('paste', (event) => {
console.log(event.clipboardData.getData('text/html'));
});
The first result is this...
<table border="0" cellpadding="0" cellspacing="0" width="80" style="border-collapse:
collapse;width:60pt">
<colgroup><col width="80" style="width:60pt">
</colgroup><tbody><tr height="25" style="height:18.75pt">
<td height="25" class="xl66" width="80" style="height:18.75pt;width:60pt">XXXX</td>
</tr>
<tr height="25" style="height:18.75pt">
<td height="25" class="xl67" style="height:18.75pt">XXXXXXXX</td>
</tr>
<tr height="25" style="height:18.75pt">
<td height="25" class="xl67" style="height:18.75pt">XXXX</td>
</tr>
<tr height="25" style="height:18.75pt">
<td height="25" class="xl67" style="height:18.75pt">XXXX</td>
</tr>
<tr height="25" style="height:18.75pt">
<td height="25" class="xl68" style="height:18.75pt">XXXX<br>
</td>
</tr>
<tr height="25" style="height:18.75pt">
<td height="25" class="xl68" style="height:18.75pt">XXXX<br>
</td>
</tr>
<tr height="25" style="height:18.75pt">
<td height="25" class="xl68" style="height:18.75pt">XXXX</td>
</tr>
<tr height="25" style="height:18.75pt">
<td height="25" class="xl68" style="height:18.75pt">XXXX</td>
</tr>
<tr height="25" style="height:18.75pt">
<td height="25" class="xl67" style="height:18.75pt">XXXX</td>
</tr>
<tr height="25" style="height:18.75pt">
<td height="25" class="xl67" style="height:18.75pt">XXXX</td>
</tr>
<tr height="25" style="height:18.75pt">
<td height="25" class="xl69" style="height:18.75pt">XXXX</td>
</tr>
</tbody></table>
The next result is this
<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name=ProgId content=Excel.Sheet>
<meta name=Generator content="Microsoft Excel 15">
<link id=Main-File rel=Main-File
href="file:///C:/Users/XXX/AppData/Local/Temp/msohtmlclip1/01/clip.htm">
<link rel=File-List
href="file:///C:/Users/XXX/AppData/Local/Temp/msohtmlclip1/01/clip_filelist.xml">
<style>
<!--table
{mso-displayed-decimal-separator:"\.";
mso-displayed-thousand-separator:"\,";}
@page
{margin:.75in .7in .75in .7in;
mso-header-margin:.3in;
mso-footer-margin:.3in;}
.font5
{color:windowtext;
font-size:6.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:"Meiryo UI", monospace;
mso-font-charset:128;}
tr
{mso-height-source:auto;
mso-ruby-visibility:none;}
col
{mso-width-source:auto;
mso-ruby-visibility:none;}
br
{mso-data-placement:same-cell;}
td
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:black;
font-size:11.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:メイリオ, monospace;
mso-font-charset:128;
mso-number-format:General;
text-align:general;
vertical-align:middle;
border:none;
mso-background-source:auto;
mso-pattern:auto;
mso-protection:locked visible;
white-space:nowrap;
mso-rotate:0;}
.xl66
{color:windowtext;
font-size:12.0pt;
font-weight:700;
font-family:"Meiryo UI", monospace;
mso-font-charset:128;
text-align:left;
border-top:.5pt solid windowtext;
border-right:none;
border-bottom:.5pt solid windowtext;
border-left:.5pt solid windowtext;
background:#D9E1F2;
mso-pattern:black none;}
.xl67
{color:#444444;
font-family:"Meiryo UI", monospace;
mso-font-charset:128;
text-align:left;
border-top:none;
border-right:none;
border-bottom:none;
border-left:.5pt solid windowtext;}
.xl68
{font-family:"Meiryo UI", monospace;
mso-font-charset:128;
border-top:none;
border-right:none;
border-bottom:none;
border-left:.5pt solid windowtext;}
.xl69
{color:#444444;
font-family:"Meiryo UI", monospace;
mso-font-charset:128;
text-align:left;
border-top:none;
border-right:none;
border-bottom:.5pt solid windowtext;
border-left:.5pt solid windowtext;}
ruby
{ruby-align:left;}
rt
{color:windowtext;
font-size:6.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:メイリオ, monospace;
mso-font-charset:128;
mso-char-type:katakana;
display:none;}
-->
</style>
</head>
<body link="#0563C1" vlink="#954F72">
<table border=0 cellpadding=0 cellspacing=0 width=80 style='border-collapse:
collapse;width:60pt'>
<!--StartFragment-->
<col width=80 style='width:60pt'>
<tr height=25 style='height:18.75pt'>
<td height=25 class=xl66 width=80 style='height:18.75pt;width:60pt'>XXXX</td>
</tr>
<tr height=25 style='height:18.75pt'>
<td height=25 class=xl67 style='height:18.75pt'>XXXX</td>
</tr>
<tr height=25 style='height:18.75pt'>
<td height=25 class=xl67 style='height:18.75pt'>XXXX</td>
</tr>
<tr height=25 style='height:18.75pt'>
<td height=25 class=xl67 style='height:18.75pt'>XXXX</td>
</tr>
<tr height=25 style='height:18.75pt'>
<td height=25 class=xl68 style='height:18.75pt'>XXXX<br>
</td>
</tr>
<tr height=25 style='height:18.75pt'>
<td height=25 class=xl68 style='height:18.75pt'>XXXX<br>
</td>
</tr>
<tr height=25 style='height:18.75pt'>
<td height=25 class=xl68 style='height:18.75pt'>XXXX</td>
</tr>
<tr height=25 style='height:18.75pt'>
<td height=25 class=xl68 style='height:18.75pt'>XXXX</td>
</tr>
<tr height=25 style='height:18.75pt'>
<td height=25 class=xl67 style='height:18.75pt'>XXXX</td>
</tr>
<tr height=25 style='height:18.75pt'>
<td height=25 class=xl67 style='height:18.75pt'>XXXX</td>
</tr>
<tr height=25 style='height:18.75pt'>
<td height=25 class=xl69 style='height:18.75pt'>XXXX</td>
</tr>
<!--EndFragment-->
</table>
</body>
</html>
As you can see, the programmatically acquired one lacks style information. Is there a way to get style information like PasteEvent in AsyncClipboard API?
javascript
excel
clipboard
paste
0 Answers
Your Answer