html2canvas 有些边框无法生成截图

Question

html2canvas 有些边框无法生成截图

mathink

417135168

发布于
2019-09-11

问题描述

使用 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>

html2canvas canvas

阅读 5.1k

1 个回答

得票最新

青青子矜

57416

发布于
2019-09-11

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

撰写回答