大致介绍：
API: navigator.clipboard —在https下生效，返回一个可以读写剪切板内容的clipboard对象；
以下代码使用 navigator.clipboard 来访问系统剪切板，以读取系统剪切板的内容。
navigator.clipboard.readText().then(
clipText => document.querySelector(".cliptext").innerText = clipText
);
项目中使用：
// 1.下载使用dom-to-image;
const canvasPoster = {
initDomtoPng(dom) {
// 在safari上面需要提前绘制初始化一次，否则异步的图片内容第一次会绘制丢失为空；
return domtoimage.toPng(dom);
},
async downloadPoster(dom, downloadName = '') {
const canvasLink = await this.initDomtoPng(dom);
this.copyPoster(canvasLink);
download(canvasLink, `${downloadName}.png`); // a标签下载到方法封装
},
copyPoster(link) { // 将海报复制到系统剪切板
const img = new Image();
img.src = link;
img.crossOrigin = 'anonymous';
img.onload = () => {
copyToClipboard(img); // 剪切板方法封装
};
},
urlProxy(url) { // bff代理，微信头像等跨域图片的转发
return `${window.location.origin}/b/api/proxy/file?url=${encodeURIComponent(url)}`;
}
};
// 2.a标签下载到方法封装
export async function download(
link: string,
filename: string
) {
const { origin: downloadOrigin } = new URL(link);
const { origin: siteOrigin } = location;
// 如果下载的资源，不是在同一个域名下，a标签download设置无效，需要先将资源转为blob，在本地下载
if (downloadOrigin !== siteOrigin || !canUseSaveLink) {
await fetch(link)
.then(res => res.blob())
.then(blob => downloadBlob(blob, filename));
return;
}
a.href = link;
a.download = filename;
a.target = '_blank';
click(a);
}
// 3.剪切板方法封装
export async function copyToClipboard(img) {
// https 下生效
if (navigator.clipboard) {
const cvs = image2Canvas(img);
const blob = await new Promise((resolve, reject) => {
cvs.toBlob(resolve);
});
await navigator.clipboard.write([
// eslint-disable-next-line no-undef
new ClipboardItem({
[blob.type]: blob,
}),
]);
}
else {
const selection = window.getSelection();
selection.removeAllRanges();
const range = document.createRange();
range.selectNode(img);
window.getSelection().addRange(range);
document.execCommand('Copy');
selection.removeAllRanges();
}
}
// 4.canvas绘制img方法封装
export function image2Canvas(img: HTMLImageElement) {
const cvs = document.createElement('canvas');
cvs.width = img.width;
cvs.height = img.height;
const ctx = cvs.getContext('2d');
ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
return cvs;
}
navigator.clipboard参考网址：developer.mozilla.org/zh-CN/docs/…
clipboard参考网址：www.ruanyifeng.com/blog/2021/0…
createRange参考网址：www.cnblogs.com/lijinwen/p/…
