JS 或 Angular 复制文字带图
[英]JS or Angular Copy Text with Image
问题描述
I need to copy both text and image in single click.
我需要单击复制文本和图像。 I tried below code.我试过下面的代码。 I clicked and pasted only I'm getting "clip_message"我只单击并粘贴我收到“clip_message”
My HTML:我的HTML：
<button id="copy" onclick="writeClipImg()"><strong>Copy</strong></button>
My JS code我的JS代码
async function writeClipImg() {
try {
const imgURL = 'https://luanedcosta.github.io/copy-image-clipboard/static/media/SecondImage.ef100414.png';
const data = await fetch(imgURL);
const blob = await data.blob();
const blob2 = new Blob(['clip_message'], {type: 'text/plain'});
await navigator.clipboard.writeText('swe');
await navigator.clipboard.write([
new ClipboardItem({
'text/plain': blob2,
'image/png': blob
})
]);
console.log('Fetched image copied.');
} catch(err) {
console.error(err.name, err.message);
}
}
Actually I tried in JS.实际上我在 JS 中尝试过。 If I have solution in Angular, thats also better.如果我在 Angular 有解决方案，那也更好。 Please help me to copy both in single click.请帮助我单击复制。 Thanks谢谢
2 个解决方案
解决方案1
1 2022-04-18 09:48:25
You can work around the one ClipboardItem item limitation by using HTML instead.您可以通过使用 HTML 来解决一个 ClipboardItem 项目限制。
I haven't tried this in other browsers, but at least in Chrome it works, and I can paste in Word/Teams/Slack without problems.我没有在其他浏览器中尝试过这个，但至少在 Chrome 中它有效，而且我可以毫无问题地粘贴到 Word/Teams/Slack 中。
Note: the snippet below does not work on StackOverflow because of some security restrictions, but you can try it on codepen注意：由于某些安全限制，下面的代码片段不适用于 StackOverflow，但您可以在 codepen 上尝试
const btn = document.getElementById('btn'); btn.addEventListener('click', () => { const html = ` <img src="https://luanedcosta.github.io/copy-image-clipboard/static/media/SecondImage.ef100414.png"> <p>Lorem ipsum</p> `; const data = [ new ClipboardItem({ "text/html": new Blob([html], { type: "text/html" }) }) ]; navigator.clipboard.write(data).then( () => { console.log("Copied to clipboard;"), }. (err) => { console;error(err); } ); });
<button id="btn">Copy</button>
解决方案2
-1 2021-05-17 21:29:49
Probably, we cant copy both the image and the text in this period of time.可能，我们不能在这段时间内同时复制图像和文本。
According to the Clipboard.write() documentation:根据Clipboard.write()文档：
Note: You can only pass in one clipboard item at a time.
I have tried to pass an array to the cliboard.write method, but it throws the following error:我试图将数组传递给cliboard.write方法，但它会引发以下错误：
(index):29 NotAllowedError Support for multiple ClipboardItems is not implemented.
BTW, you can check this example, as well.顺便说一句，您也可以查看此示例。
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button onclick="copy()">Copy Button</button> <script> async function copy(){ try { const imgURL = 'https://luanedcosta.github.io/copy-image-clipboard/static/media/SecondImage.ef100414.png'; const data = await fetch(imgURL); const blob = await data.blob(); const blob2 = new Blob(['clip_message'], {type: 'text/plain'}); // await navigator.clipboard.writeText('swe'); await navigator.clipboard.write([ new ClipboardItem({ [blob.type]: blob }), new ClipboardItem({ 'text/plain': blob2 }) ]); console.log('Fetched image copied.'); } catch(err) { console.error(err.name, err.message); } } </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.