打印从iOS和Android的一个HTML模板

问题描述 投票:4回答:1

简而言之:有没有办法打印从iOS和Android等找模板?或者是有至少一个方法来打印与适当的分页符WebKit的HTML表格?


龙:我的应用程序需要能够打印的内容的列表。我的第一次尝试是使用HTML创建一个模板,然后从代码中插入内容。该系统的工作原理,但是当表exeeds一个页面,WebKit的完全破坏表。我知道有对SO有关WebKit的分页符的一些问题,但解决方案的工作都不是。

此图像显示用铬印刷。正如你可以看到很好的分页符。

Chrome


此图片显示在Safari相同。分页符完全破坏表:Safari (WebKit)

我的代码看起来像这样的时刻:

<!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/[email protected]/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 html ios css printing
1个回答
0
投票

如果你想从你的Android应用程序显示的图像,首先您需要保存在Android内部存储这个网站,然后使用web视图可以显示上述数据图像按给定的。

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

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.