vue下页面生成图片功能

目前主流的两种方式网页生成图片的插件

1. 使用html2canvas

Install NPM
npm install --save html2canvas
Install Yarn
yarn add html2canvas

引入方式ES6

import html2canvas from "html2canvas";

常见问题：

1. 出现滚动条，只截取到可视区域的页面

解决方法： 克隆一个需要生成图片的DOM对象

      //解决截屏时，滚动条隐藏部分不能截取问题
      const tableWidth = this.$refs.custom_table.$refs.cTable.bodyWidth;  // 具体内容的宽度
      const tableHeight = this.$refs.custom_table.clientHeight;  // 具体内容的高度
      const targetDom = document.querySelector(".imgArea");
      let copyDom = targetDom.cloneNode(true);
      copyDom.style.width = tableWidth;
      copyDom.style.height = tableHeight;
      document.querySelector("body").appendChild(copyDom);

调用方法生成图片下载

     // options 参数设置参照文档说明

      const options =  { useCORS: true, backgroundColor: null }
      html2canvas(copyDom,options ).then(
        canvas => {
          //document.body.appendChild(canvas);
          this.imgURL = canvas.toDataURL("image/png");
          //必须同源（访问的网站域名与服务器域名一致）才能下载
          const eleLink = document.createElement("a");
          eleLink.href = this.imgURL;    // 转换后的图片地址
          eleLink.download = +new Date() + "_实时采集数据";
          document.body.appendChild(eleLink);
          // 触发点击
          eleLink.click();
          // 然后移除
          document.body.removeChild(eleLink);
          document.body.removeChild(copyDom);
        }
      );

2. 使用dom-to-image

具体用法点击 插件名称进入到官方有使用样例。

出现滚动条和html2canvas解决方式一样

      domtoimage.toJpeg(copyDom).then(function(dataUrl) {
        const eleLink = document.createElement("a");
        eleLink.href = dataUrl; // 转换后的图片地址
        eleLink.download = +new Date() + "_实时数据.jpeg";
        document.body.appendChild(eleLink);
        // 触发点击
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
      });