前端打印div内容和将div内容转为图片下载

向阳花开^_*

已于 2024-03-29 12:08:20 修改

阅读量682

点赞数 7

分类专栏：前端图片下载前端打印前端开发文章标签：前端 javascript html

于 2024-03-26 15:52:58 首次发布

本文链接：https://blog.csdn.net/m0_48990893/article/details/137047836

版权

前端开发同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端图片下载

1 篇文章 0 订阅

订阅专栏

前端打印

1 篇文章 0 订阅

订阅专栏

一、效果图：

下载：

打印：

二、代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-size: 16px;
    }

    p {
      padding: 0;
      margin: 0;
    }

    #print-box {
      width: 1000px;
      height: 550px;
      padding: 100px;
      box-sizing: border-box;
      line-height: 32px;
      background: url(bg9.png) no-repeat;
      background-size: 100% 100%;
    }

    .print-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 50px;
      font-size: 28px;
    }

    .com_name {
      font-size: 38px;
      color: #865800;
      font-weight: bold;
      text-align: center;
    }


    #btn {
      position: fixed;
      width: 80px;
      height: 30px;
      right: 0;
      top: 50px;
      background-color: #0066cc;
      border-radius: 30px 0 0 30px;
      color: #f1f1f1;
      cursor: pointer;
      border: none;
    }

    @media print {
      body {
        background-image: url('bg9.png');
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
        padding: 100px;
        box-sizing: border-box;
      }
    }
  </style>

  <script src="./html2canvas.min.js"></script>
</head>

<body>
  <div id="print-box">
    <div class="print-content">
      <div class="com_name">div打印和下载</div>
      <div>
        <div>xxxx内容区域块，可自行定义</div>
        <div style="margin-top: 20px;"><span style="font-weight: bold;">授权期限：</span>2024年3月26日至9999年12月31日</div>
      </div>
      <div style="text-align: right;padding-right: 50px;font-size: 20px;margin-top: 20px;">
        <p>xxxxxx科技有限公司</p>
        <p>2024年3月26日</p>
      </div>
    </div>
  </div>
  <button id="btn" onclick="printDiv()">打印</button>
  <button id="btn" onclick="printAndSave()" style="top:100px">下载图片</button>

</body>

</html>
<script>
  // 打印
  function printDiv () {
    var printContents = document.getElementById("print-box").innerHTML;
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
  }
  // 下载图片
  function printAndSave () {
    // 使用html2canvas将print-box转换为图片
    html2canvas(document.getElementById("print-box")).then((canvas) => {
      // 将canvas转换为图片的data URL
      var imageDataURL = canvas.toDataURL("image/png");

      // 创建一个临时的下载链接并设置下载属性
      var downloadLink = document.createElement("a");
      downloadLink.href = imageDataURL;
      downloadLink.download = "print-box-image.png";

      // 将链接添加到DOM中并点击该链接以下载图片
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
    });
  }
</script>