htmlcanvas2实现将网页生成图片,自定义保存图片的名称

实现原理:

将页面需要生成图片内容截图,然后赋值给a标签的href,再通过a标签提供的下载功能

1.引入插件:html2canvas

 <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

2.使用插件

//生成图片,点击id为createImg的按钮生成图片
$("#createImg").click(function () { 

  html2canvas(document.querySelector(
".main")).then(function (canvas) {
 //canvas转换成url,然后利用a标签的download属性,直接下载,绕过上传服务器再下载
 document .querySelector(".saveImg") .setAttribute("href", canvas.toDataURL()) }); });//给class为saveImg的a标签添加href属性

3.此时a标签上已经有了href属性,再点击a标签就能下载

 

案例:

复制代码
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>

    <style>
      * {
        box-sizing: border-box;
      }
      .main {
        width: 720px;
        margin: auto;
        box-shadow: 0 0 23px #ddd6;
      }
      .main2 {
        width: 720px;
        margin: auto;
        box-shadow: 0 0 23px #ddd6;
        display: flex;
        justify-content: space-between;
      }
      .main2 div a {
        text-decoration: none;
        color: black;
        border: 1px solid #d1d6d1;
        background-color: -internal-light-dark(
          rgb(239, 239, 239),
          rgb(59, 59, 59)
        );
        border-radius: 5px;
      }
      #customers {
        font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }

      #customers td,
      #customers th {
        border: 1px solid #ddd;
      }

      #customers th {
        padding-bottom: 12px;
        text-align: center;
        background-color: #d1d6d1;
        color: black;
      }
      #customers th td {
        padding: 0;
        margin: 0;
      }
      #customers tr td {
        width: 6rem;
      }
      #customers tr td:nth-child(4) {
        background-color: #d1d6d1;
      }
      #customers tr td:nth-child(6) {
        background-color: #d1d6d1;
      }
      #customers tr td:nth-child(8) {
        background-color: #d1d6d1;
      }
      input {
        width: 100%;
        border: none;
        font-size: 17px;
        padding: 0;
        margin: 0;
        text-align: center;
        border: 0px;
        outline: none;
      }
      .input1 {
        width: 11rem;
        border: none;
        font-size: 18px;
        color: black;
        padding: 0;
        margin: 0;
      }
    </style>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script type="text/javascript">
      $(function () {
        //增加行
        $("#addRow").click(function () {
          let tr = ` <tr>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
          <td><input style="</td>
          <td><input type="text" /></td>
          <td><input style="</td>
          <td><input type="text" /></td>
          <td><input style="</td>
          <td><input class="input1" type="text" /></td>
        </tr>`;
          $("#customers").append(tr);
        });
        //生成图片
        $("#createImg").click(function () {
          html2canvas(document.querySelector(".main")).then(function (canvas) {
            //document.body.appendChild(canvas);
            //canvas转换成url,然后利用a标签的download属性,直接下载,绕过上传服务器再下载
            document
              .querySelector(".saveImg")
              .setAttribute("href", canvas.toDataURL());
            alert("图片生成成功!");
          });
        });
      });
    </script>
  </head>
  <body>
    <div class="main">
      <table id="customers">
        <tr>
          <th rowspan="2">PLUS SIZE</th>
          <th rowspan="2">US</th>
          <th colspan="2">BUST</th>
          <th colspan="2">WAIST</th>
          <th colspan="2">HIP</th>
          <th rowspan="2">BRA</th>
        </tr>
        <tr>
          <th>CM</th>
          <th>INCH</th>
          <th>CM</th>
          <th>INCH</th>
          <th>CM</th>
          <th>INCH</th>
        </tr>
        <tr>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
          <td><input style="">" type="text" /></td>
          <td><input type="text" /></td>
          <td><input style="">" type="text" /></td>
          <td><input type="text" /></td>
          <td><input style="">" type="text" /></td>
          <td><input class="input1" type="text" /></td>
        </tr>
        <tr>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
          <td><input type="text" /></td>
          <td><input style="">" type="text" /></td>
          <td><input type="text" /></td>
          <td><input style="">" type="text" /></td>
          <td><input type="text" /></td>
          <td><input style="">" type="text" /></td>
          <td><input class="input1" type="text" /></td>
        </tr>
      </table>
    </div>
    <div class="main2">
      <div><button id="addRow">增加行</button></div>
      <div><button id="createImg">生成图片</button></div>
      <div>
        <a id="saveImg" class="saveImg" href="" download="downImg">下载图片</a>
      </div>
    </div>
  </body>
</html>
复制代码

 

posted @   lijun12138  阅读(1556)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示