从iOS和Android打印html模板

短：
有没有办法从ios和android打印相同的模板？或者至少有一种方法可以在WebKit中使用正确的分页符打印html表吗？

长：
我的应用程序需要能够打印内容列表.我的第一次尝试是使用html创建模板,然后从代码中插入内容.系统可以工作,但是当表格执行一个页面时,WebKit会完全破坏表格.我知道在WebKit中有关于分页符的问题,但没有一个解决方案有效.

此图显示了使用Chrome进行打印.正如您所看到的那样,页面可以很好地解决.

此图像在Safari中显示相同.分页符完全破坏了表格：

我的代码目前看起来像这样：

<!DOCTYPE html>
<html>

<head>
  <style>
    tr {
      page-break-inside: avoid;
      page-break-before: auto;
      page-break-after: auto;
      width: 100%;
    }
    
    html,
    body {
      font-family: "Trebuchet MS", Helvetica, sans-serif;
      padding: 0;
      margin: 0;
      width: 100%;
    }
    
    table {
      border-collapse: collapse;
      width: 100%;
      table-layout: fixed;
      page-break-after: auto;
    }
    
    th,
    td {
      border: 0.5px solid black;
      border-collapse: collapse;
      page-break-after: auto;
    }
    
    th {
      width: 30%;
    }
    
    th+th {
      width: 40%;
      text-align: center;
    }
    
    th+th+th {
      width: 15%;
    }
    
    th+th+th+th {
      width: 15%;
    }
    
    td+td {
      text-align: center;
    }
    
    td+td+td {
      text-align: right
    }
    
    h1 {
      margin-bottom: 0.2cm;
    }
    
    hr {
      background-color: #000000;
      height: 1cm;
      float: left;
    }
  </style>

  <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/barcodes/JsBarcode.ean-upc.min.js"></script>
</head>

<body>
  <div style="clear: both">
    <h1 style="float: left">Materialentnahmeliste</h1>
    <h1 style="float: right">1805/156</h1>
  </div>

  <table>
    <thead>
      <tr>
        <th>Artikel</th>
        <th>EAN</th>
        <th>Menge</th>
        <th>Verbr.</th>
      </tr>
    </thead>

    <script>
      const barcodes = [5413184160722, 4012615997145, 4004631016214, 5413184160593, 5413184160616, 5413184160654, 5413184160692, 4004631009315, 4004631047096, 4004631010977, 4210201175469, 5413184151492, 4004631062198, 4004631009476, 4004631011660, 4002515500361, 4012615996636, 4242002957005, 5413184104139, 5413184104047, 5413184170301, 4004631006567, 4002515824481, 4002515824528, 4002515942420, 5413184160968, 4004631000749, 4016803170921, 4016803174820, 4016803178187, 3121040039830, 5413184160081, 4002515932773, 4016803171263, 4016803037330, 4002515824177, 5413184122935, 4001797672001].map(String)

      barcodes.forEach(barcode => {
        document.write(`
                        <tr>
                            <td>${barcode}</td>
                            <td><svg id="b${barcode}"></svg></td>
                            <td>10000m</td>
                            <td>tet</td>
                        </tr>
                    `)
      })
    </script>
  </table>

  <p style="text-align:left;">
    Ausgegeben von:
    <span style="float:right;">Nov 25, 2018 at 3:00 PM</span>
  </p>
  <hr style="border: none">

  <script>
    barcodes.forEach(barcode => {
      JsBarcode("#b" + barcode, barcode, {
        format: "EAN13",
        height: 25,
        width: 2,
        flat: true,
        displayValue: true,
        margin: 2
      });
    })
  </script>

</body>


</html>

解决方法:

如果你想显示你的Android应用程序中的图像,首先你需要在Android内部存储上保存这个html,然后使用webview你可以按照上面给出的图像显示数据.

 mWebView.loadUrl("file:///android_asset/new.html");
 mWebView.getSettings().setJavaScriptEnabled(true);

从iOS和Android打印html模板

相关文章