vue---将dom结构转换为图片，复制到剪切版，进行下载

这个需求呢，属于点击复制实现俩功能

首先，确定要转换图片的元素

 <div  ref="chatReplyRef"  v-html="outputText"></div>
 
 const chatReplyRef = ref();

1 点击下载，将dom转换为图片

先安装俩插件吧，一个转换图片，一个下载，其原理还是cavans,自己研究吧

import domtoimage from "dom-to-image";
import FileSaver from "file-saver";

  let domObj = chatReplyRef.value;
    
  domtoimage.toPng(domObj, {
      bgcolor: "#fff",
      height: domObj.clientHeight + 55,
      width: domObj.clientWidth,
    })
    .then((dataUrl) => {
      FileSaver.saveAs(dataUrl, "cal.png");
      ElMessage.success("图片已保存到本地");
    })
    .catch((error) => {
      ElMessage.error("图片生成失败");
    });

2 点击复制，到剪切板

这个要用到 html2canvas插件，下载后引入就完了

import html2canvas from "html2canvas";

这里需要注意的是，clipboard.write这个方法，在http协议下读取不到，只能在https和本地

      let domObj = chatReplyRef.value;
      html2canvas(domObj).then((canvas) => {
        canvas.toBlob(
          (blob) => {
            try {
              navigator.clipboard.write([
                new ClipboardItem({
                  [blob.type]: blob,
                }),
              ]);
              ElMessage.success("已成功复制到剪切板");
            } catch (err) {
             ElMessage.success("无法复制图像到剪贴板");
            }
          },
          "image/png",
          1
        );
      });

3总结

为啥不用html2canvas来转图片呢，因为不知道为啥，用它生成的图片，里面的公式会有重复渲染，正常文字的话，可以使用