zoukankan      html  css  js  c++  java
  • 使用html2Canvas将盒子内的整体内容作为图片进行导出

     首先下载包

    npm i  html2canvas@1.0.0-alpha.12

    也可以选择别的版本,但是自测最新的版本不行,会报错。

    使用函数

    // name是名称,content是你要导出的html元素,可以通过添加id的方式获取如下
         let shareContent = document.getElementById("content");
    takeScreenShot(name,content) {
        // 使用html2canvas插件,将数据源中的数据转换成画id布。
        html2canvas(content).then(canvas => {
          // 修改生成的宽度
          // canvas.style.width = "1000px";
          // console.log(canvas, "生成的画布文件");
          let filename = name + '_' + moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss') + '.png'
          let canvasImg = canvas.toDataURL("image/png");
          let a = document.createElement("a"); 
          let event = new MouseEvent("click"); // 创建一个单击事件
          a.download = filename || "photo";
          a.href = canvasImg;
          a.dispatchEvent(event); // 触发a的单击事件
        });
      }
  • 相关阅读:
    C#创建ActiveX
    easy-ui 中的事件触发 (tree)
    程序目录
    微信公众平台开发
    Redis分片机制
    Redis主从切换
    Redis主从复制
    Redis持久化机制
    Redis缓存击穿、缓存穿透、缓存雪崩
    Redis与数据库数据一致性
  • 原文地址:https://www.cnblogs.com/userGao/p/13045345.html
Copyright © 2011-2022 走看看