SteGriff

Blog

Next & Previous

Copy HTML with native Clipboard API

The relatively new Clipboard API in browsers lets you load up the user’s clipboard as though they’d copied something themselves. Doing so with text or images is fairly well documented, but writing rich text (as HTML) is harder to come by.

At time of writing, it’s implemented in Chrome 86+ and in Safari. I got the content for this post from the Glitch project created by dsleeps at Google.

How to copy rich text HTML onto the Clipboard API

This sample assumes you have a `<div class="js-output"></div>” containing your HTML to copy.

I’ll cut right to it:

try {
	const content = document.getElementsByClassName('js-output')[0].innerHTML;
	const blobInput = new Blob([content], {type: 'text/html'});
	const clipboardItemInput = new ClipboardItem({'text/html' : blobInput});
	navigator.clipboard.write([clipboardItemInput]);
} catch(e) {
	// Handle error with user feedback - "Copy failed!" kind of thing
	console.log(e);
}

Key things:

Demo

I have a quickly-made Vue app with a ‘Copy to Clipboard’ button at https://stegriff.github.io/deployment-complete/. Source repo at https://github.com/stegriff/deployment-complete.

Hoping this tutorial helps you!