如何在页面上把dom元素复制到粘贴板上（PC&Mobile）

这里需要用到html2canvas这个第三方插件  :npm install html2canvas安装第三方插件

首先获取到你要复制的盒子this.$ref.DIV

然后创建一个canvas(画布)元素

这里利用第三方插件的事件html2canvas里面的useCORS:ture是用来配置图片跨域的

allowTaint:false是用来解决图片模糊不清的问题，注意！这两个属性不能同时设置,如果同时设置，只有一个属性起作用.

    html2canvas(element, { useCORS: true, allowTaint: false }).then(function (canvas) {
        // 使用toDataURL()方法将canvas元素转换为data URL格式的图像数据
        var imageData = canvas.toDataURL('image/png')    //这里是对canvas元素进行了处理，把canvas元素转换成base64进制的形式
        
        // 创建一个新的Image对象，并将data URL设置为其src属性
        var img = new Image();    
        img.src = imageData;     对图片的src属性进行赋值，把canvas的base64链接赋值给img的src
        // 在Image对象的onload事件中，将Image对象绘制在一个新的canvas上
        img.onload = function () {
图片的onload事件就是图片加载完之后触发的事件，这个是为了解决js一步渲染的问题，防止dom还没有渲染，下面的js脚本就运行这样是获取不到上面的dom元素的
          var newCanvas = document.createElement('canvas');  创建一个新的canvas元素
          newCanvas.width = img.width;  设置这个canvas元素的宽高
          newCanvas.height = img.height;
          var ctx = newCanvas.getContext('2d');  //这里是对canvas元素获取上下文
          ctx.drawImage(img, 0, 0);    

          // 获取新的canvas元素，并使用toBlob()方法将其转换为Blob对象
          newCanvas.toBlob(function (blob) {
            // 创建一个新的ClipboardItem对象，并将Blob对象添加到其中
            var item = new ClipboardItem({ 'image/png': blob });
            // 使用navigator.clipboard.write()方法将ClipboardItem对象复制到粘贴板上
            navigator.clipboard.write([item]).then(function () {
            }).catch(function (error) {
              console.error('Could not copy image to clipboard: ', error);
            });
          }, 'image/png');   //这里是要表明你要复制的格式
        };
      });