html2canvas 有些边框无法生成截图

问题描述

使用 html2canvas 截图时,有些边框截不出来

图片描述

相关代码

jsfiddle

完整测试代码如下

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <title>html2canvas</title>
  <link rel="stylesheet" href="./index.css">
  <style>
    .test {
      padding: 5px 1.6mm;
    }

    .test-row{
        border: #000 1px solid;
        font-size: 0;
        line-height: 0;
        width: 32mm;
    }
    .test-row span{
        display: inline-block;
        border-right: #000 0.5px solid;
        width: 8mm;
        height: 8mm;
        position: relative;
    }
    .test-row span.end{
        display: block;
        width: auto;
        height: 2mm;
        border-top: #000 0.5px solid;
        border-bottom: #000 0.5px solid;
        border-right: 0;
        font-size: 12px;
        text-align: right;
        color: #666;
    }
    .test-row span.end:last-child{
        display: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="test">
      <div class="test-row">
        <span></span>
        <span class="end"></span>
        <span></span>
        <span class="end"></span>
      </div>
    </div>
  </div>
  <button onclick="capture()">Capture</button>

  <script src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-rc.3/html2canvas.min.js"></script>
  <script>
  function capture () {
    console.log('capture')
    html2canvas(document.querySelector('.container')).then(canvas => {
      document.body.appendChild(canvas)
    })
  }
  </script>
</body>
</html>
阅读 1.5k
评论
    1 个回答

    用table不好吗? 非要反人类布局。。。

      撰写回答

      登录后参与交流、获取后续更新提醒

      相似问题
      推荐文章