javascript - TypeError: Failed to construct 'ClipboardItem': Failed to convert value to 'Blob' -

admin管理员组

文章数量:1355031

I want to write text and html to the user clipboard. I am using the code snippet from MDN:

navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
    if (result.state === 'granted') {
        let data = [new ClipboardItem({ "text/plain": message })];
        navigator.clipboard.write(data).then(function() {
            $.growl.notice({ message: ResourceService.getKey("CopyToClipboardSuccess"), location: "tc", title: "" });
        }, function() {
            $.growl.error({ message: ResourceService.getKey("CopyToClipboardError"), location: "tc", title: "" });
        });
    }
});

All I get is this error:

Uncaught (in promise) TypeError: Failed to construct 'ClipboardItem': Failed to convert value to 'Blob'.

Is there another way to copy text and HTML to the clipboard. What do I miss?

I want to write text and html to the user clipboard. I am using the code snippet from MDN: https://developer.mozilla/en-US/docs/Web/API/Clipboard/write

navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
    if (result.state === 'granted') {
        let data = [new ClipboardItem({ "text/plain": message })];
        navigator.clipboard.write(data).then(function() {
            $.growl.notice({ message: ResourceService.getKey("CopyToClipboardSuccess"), location: "tc", title: "" });
        }, function() {
            $.growl.error({ message: ResourceService.getKey("CopyToClipboardError"), location: "tc", title: "" });
        });
    }
});

All I get is this error:

Uncaught (in promise) TypeError: Failed to construct 'ClipboardItem': Failed to convert value to 'Blob'.

Is there another way to copy text and HTML to the clipboard. What do I miss?

• javascript
• google-chrome
• clipboard

Share Improve this question Follow asked Aug 24, 2020 at 13:12 kaljakkaljak 1,27311 gold badge1717 silver badges3434 bronze badges 3

• Can you give the type and content of the message variable? It seems that it can't be converted to a blob in the third line. – Yann Commented Aug 27, 2020 at 6:23
• Also, what browser are you using? The Clipboard API is only a draft at the time of writing and only Chrome seems to support it fully (with ClipboardItem). developer.mozilla/en-US/docs/Web/API/… – Yann Commented Aug 27, 2020 at 6:27
• I am using the latest Chrome and message is a string – kaljak Commented Aug 27, 2020 at 9:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9 +50

assuming your message is string type, here is a demo code

your code would be

navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
    if (result.state === 'granted') {
        const type = 'text/plain';
        const blob = new Blob([message], { type });
        let data = [new ClipboardItem({ [type]: blob })];
        navigator.clipboard.write(data).then(function() {
            $.growl.notice({ message: ResourceService.getKey("CopyToClipboardSuccess"), location: "tc", title: "" });
        }, function() {
            $.growl.error({ message: ResourceService.getKey("CopyToClipboardError"), location: "tc", title: "" });
        });
    }
});

but Clipboard API and events are still working draft, I remend using an alternatives like clipboard.js

本文标签：