html2canvas将页面绘制图片使用jspdf导出

最新推荐文章于 2023-04-21 14:48:39 发布

HaanLen

最新推荐文章于 2023-04-21 14:48:39 发布

阅读量154

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发常见问题文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/weixin_40119412/article/details/129268994

前端开发常见问题专栏收录该内容

36 篇文章

订阅专栏

该代码示例展示了如何使用html2canvas将HTML内容转化为canvas，然后利用jspdf库将canvas内容保存为A4大小的PNG图像并生成PDF文件，点击按钮即可下载。

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

粗略实现导出，细节后续再补充。

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/html2canvas.js"></script>
  <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
</head>

<body>
  <div id="root">
    <h3>名片</h3>
    <div class="person">
      <img style="width: 600px; height: 400px;"
        src="https://img0.baidu.com/it/u=3976250177,3245140550&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675" alt="">
    </div>
  </div>
  <button id="downloadImg">点击</button>
</body>

<script >
 const {jsPDF} = jspdf
  let dom = document.getElementById("downloadImg");
  dom.onclick = function () {
    // 实现保存为图片的第一步：html转为canvas
    html2canvas(document.getElementById("root"), {
      useCORS: true,
      scale: window.devicePixelRatio,
      height: 600,
      width: 800,
      // backgroundColor: null
    }).then(function (canvas) {
      const contentWidth = canvas.width;
      const contentHeight = canvas.height;

      let dataImg = canvas.toDataURL();
      console.log('content',contentWidth,contentHeight);
      //方向默认竖直，尺寸ponits，横向l
      //格式a4[595.28,841.89], 单位pt
      var doc = new jsPDF('p', 'mm', [210,297])

      doc.addImage(dataImg, 'PNG', 10, 10, 210, 297);
      doc.save('a4.pdf');

    });
  }
</script>

</html>