how to copy an array to clipboard in javascript

Question

i have this simple function in which i try to pass an array to the clipboard in order to paste in in excel later on

hiddenInputOnCopyHandler = ev => {    
    ev.clipboardData.setData('text/plain', ev.currentTarget.value.split(','));
    ev.preventDefault();
  };

but i'm getting a string instead, i guess because the type passed in the setData is 'text/plain' but i couldn't find better in its documentation

now the problem is that when it's pasted in excel , the whole serialized array will take only one cell

Do you want the result in the clipboard to look like the array elements concatnated together or something like ["a","b","c"]? — DudeManGuy
– DudeManGuy, Commented Aug 12, 2020 at 9:12
you should try tab \t instead of comma ,, (reference) ev.currentTarget.value.split(',').join('\t') — hgb123
– hgb123, Commented Aug 12, 2020 at 9:16

Marios Nikolaou · Accepted Answer · 2020-08-13 09:56:53Z

1

According to the docs, you should fire a copy command to copy the selection to clipboard. Also you should check for browser compatibility.

Also currentTarget.value gives undefined so you should use textContent instead.

When you click on paragraph, then it fires the copy command in copyAction function and then eventListener with copy event executes the hiddenInputonCopyHandler function.

function init(){

   let el = document.getElementById("CpToClip");
    el.addEventListener('click',copyAction);
    
    el.addEventListener('copy', hiddenInputOnCopyHandler);
    
}

function copyAction(){
   document.execCommand('copy');  
}

hiddenInputOnCopyHandler = ev => {
    let copiedVal = ev.currentTarget.textContent.trim().split(',').join('\t');
    
    console.log(copiedVal);// "HHHhhh" "mkjf" "Tendue" "Bonne" "10-07-2020" "[email protected]"    
    
    ev.clipboardData.setData('text/plain', copiedVal);
    ev.preventDefault();
}


addEventListener('load',init);

Html

<p id="CpToClip">
   HHHhhh,mkjf,Tendue,Bonne,10-07-2020,[email protected]
</p>

Check my solution and let me know.

edited Aug 13, 2020 at 9:56

answered Aug 12, 2020 at 9:54

Marios Nikolaou

1,3361 gold badge15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bardelman Over a year ago

i did call document.execCommand('copy'); but it didn't update the clipboard content and i had to add that paste handler that i mentionned in my question to re-do it there (and it finally worked)..

Marios Nikolaou Over a year ago

@Bardelman As you can see from my code, you should click the p tag in order to copy the content. You can modify it as you wish, check my updated answer.

hgb123 · Accepted Answer · 2020-08-12 09:48:33Z

0

You should try tab \t instead of comma , (reference)

ev.currentTarget.value.split(',').join('\t')

answered Aug 12, 2020 at 9:48

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

Collectives™ on Stack Overflow

how to copy an array to clipboard in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related