前端复制图片和文字

// 复制内容并保留图片

copyToClipboardWithImages(htmlContent) {

const tempElement = document.createElement('div');

tempElement.innerHTML = htmlContent;

// 监听复制事件

const copyHandler = event => {

event.clipboardData.setData('text/html', tempElement.innerHTML);

event.clipboardData.setData('text/plain', tempElement.textContent);

event.preventDefault();

};

document.addEventListener('copy', copyHandler);

try {

document.execCommand('copy');

this.$message.success('复制成功');

} catch (err) {

console.error('复制失败:', err);

} finally {

// 移除事件监听器

document.removeEventListener('copy', copyHandler);

// 清理临时元素

tempElement.remove();

}

}上面传参htmlContent可以是字符串和html结构的字符串但是这样保留不了结构上面是一些复杂的有公式什么的，下面是简单的能保留换行结构和解析标签的

handleCopy() {

const htmlContent = this.content || '';

const tempElement = document.createElement('div');

tempElement.innerHTML = htmlContent;

document.body.appendChild(tempElement); // 必须添加到DOM

const range = document.createRange();

range.selectNode(tempElement);

window.getSelection().removeAllRanges();

window.getSelection().addRange(range);