js 复制文字和图片到剪贴板
最近有个需求,要同时复制多张图片和文字到剪贴板,网上找了好多方法,都不行,最后上个厕所,想到直接翻w3c文档,终于实现了。让大家不迷路,共享出来,不用谢,点赞就行。
不多说,上代码
function copyInfo(sets){
let imgDiv = document.createElement('div')
imgDiv.id = '__imgDiv';
imgDiv.setAttribute('style','z-index: -1;position: fixed;')
let child = '';
if(sets.txts){
if(typeof sets.txts === 'string'){
child += `<span>${sets.txts}</span>`
}else{
sets.txts.forEach(item=>{
child += `<span>${item}</span>`
});
}
}
if(sets.imgs){
if(typeof sets.imgs === 'string'){
sets.imgs = sets.imgs.indexOf('https')>-1?sets.imgs.replace('https','http'):sets.imgs;
child += `<img src="${sets.imgs}" />`
}else{
sets.imgs.forEach(item=>{
item = item.indexOf('https')>-1?item.replace('https','http'):item;
child += `<img src="${item}" />`
});
}
}
imgDiv.innerHTML = child;
document.body.insertBefore(imgDiv,document.body.lastChild)
let dom = document.getElementById('__imgDiv')
console.log(dom)
if (window.getSelection) {//chrome等主流浏览器
let selection = window.getSelection();
let range = document.createRange();
range.selectNodeContents(dom);
selection.removeAllRanges();
selection.addRange(range);
} else if (document.body.createTextRange) {//ie
let range = document.body.createTextRange();
range.moveToElementText(dom);
range.select();
}
document.execCommand('copy');
window.getSelection().removeAllRanges();
imgDiv.parentNode.removeChild(imgDiv);
}
那么怎么使用呢
copyInfo({
txts: '请复制我',
imgs: ['https://img.shop.wusehaowu.com/20210407/da46894987254688af008a95ad121da9.png','https://t00img.yangkeduo.com/goods/images/2021-02-27/1e5bc93f957fefabc13d994a9f379dda.jpeg']
});