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

原创已于 2024-03-29 12:08:20 修改 · 1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

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

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

11 篇文章

订阅专栏

前端图片下载

1 篇文章

订阅专栏

前端打印

1 篇文章

订阅专栏

本文介绍了如何使用HTML和JavaScript，结合html2canvas库，实现在前端生成带有背景图片的HTML内容（如证书）的打印和下载功能。作者分享了代码示例和插件使用方法，适用于需要制作前端证书且支持下载的项目需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果图：

下载：

打印：

二、代码：

<!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>