Print html to a surface to be copied

Question

I stored an table's html as a text, using this code.

var Data = document.getElementsByClassName("result")[0].innerHTML;

I am able to observe the selected part using console.log, however, I wish to extract this data to be copied and used outside.

So I tried alert(Data), but it does not offer a good surface to copy the data (it does work though, however I cannot use right click on the pop-up window)

I also tried to programmatically copy the data to the clipboard, but it seems, it only works on selected text data.

Is there a better way to extract such data to be used outside ?

Note: I am using a firefox bookmark to execute javascript. But I expect the code to work also in the other browsers.

Edit: I tried the method suggested in the comments, however in firefox, I got an error.

document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler.

So rather than copying with that command, printing to a surface seems a better choice, if possible. The linked question does not solve my issue.

Edit2: window.prompt did a much better job, however it rocked my world by pressing the text to a single line. I still should be able to parse it programmatically, but if there is a better answer, I wish to learn it.

So you're asking how you can copy HTML content to the *clipboard* using JavaScript? — Obsidian Age, Feb 16 '18 at 01:06
At first, get that object you want to copy, then call select() to select it, then exec copy. — Sphinx, Feb 16 '18 at 01:09
@ObsidianAge Yes, I have found `document.execCommand('copy')`, but as I understand it, I need to select the needed part first, which I think I can't do in my situation. — Rockybilly, Feb 16 '18 at 01:09
@Sphinx, I tried that, but got `Data.select is not a function` error. Maybe I did something wrong ? — Rockybilly, Feb 16 '18 at 01:11
Possible duplicate of [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Obsidian Age, Feb 16 '18 at 01:15
@Rockybilly, you can create one hidden input then call input.select() — Sphinx, Feb 16 '18 at 01:20
@Rockybilly, or you can look into the link above provided by `Obsidian Age`, there is one solution like [ window.prompt("Copy to clipboard: Ctrl+C, Enter", text); ] — Sphinx, Feb 16 '18 at 01:28

score 0 · Answer 1 · answered Feb 16 '18 at 02:05

0

Below is my solution to keep multiple lines.

It creates one temp 'textarea', then remove it after select()->copy.

function triggercopy() {
  var target_obj = document.getElementById('test1');
  var copy_text = target_obj.innerHTML;  //replace with your actual data.
  var hidden_obj = document.createElement("textarea");
  hidden_obj.value = copy_text;
  document.body.insertBefore(hidden_obj,target_obj);
  console.log('prepare:' + copy_text);
  hidden_obj.select();
  document.execCommand("copy");
  document.body.removeChild(hidden_obj);
  console.log('already copied:' + copy_text);
}

Text3as
dfsadf

<a id="test1" onclick="triggercopy();">Text3as
dfsadf</a>

answered Feb 16 '18 at 02:05

Sphinx

10,519
2
27
45

Thank you for your answer, am currently using `window.prompt`. I altered this code for my use and got an ` Node was not found` error. – Rockybilly Feb 16 '18 at 02:17
something may be broken in your codes. provide your codes at the jsfiddle, then we can help you from there. – Sphinx Feb 16 '18 at 02:22
I may have found a better way, using `document.write()` produces a better way to printing the data. – Rockybilly Feb 16 '18 at 02:27

Rockybilly · Answer 2 · 2018-02-16T02:48:11.430

I found two methods best suit my interests.

First, window.prompt:

var Data = document.getElementsByClassName("result")[0].innerHTML;

function copyToClipboard(text) {
    window.prompt("Copy data.", text);
}
copyToClipboard(Data)

This is a good method, taken from a suggested answer. This puts the data into a single-line text field. And in an interesting manner, when written without a function, executes document.write(Data) when clicked OK, this does not happen when written in a function as above.

Second, document.write:

var target = document.getElementsByClassName("resultTable striped")[0].outerHTML;
document.open('text/plain');
document.write(target);

I first tried to open a new tab with the desired content, however encountered with the issue of pop-up blockers and non-plain text html data (formatted html instead of the desired table html data). This solves both issues.

Print html to a surface to be copied

2 Answers2