从 iOS 和 Android 打印 html 模板答案

【问题标题】：Printing a html template from iOS and Android从 iOS 和 Android 打印 html 模板
【发布时间】：2019-06-29 05:49:55
【问题描述】：

短：有没有办法从 ios 和 android 打印外观相同的模板？或者至少有一种方法可以在 WebKit 中打印带有适当分页符的 html 表格？

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

此图片显示使用 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>

【问题讨论】：

对于 iOS，您可以使用 JavaScriptCore 框架加载 HTML 代码并生成 pdf。可以加载到 WebView 中。您还可以使用 javascript 将动态数据迭代到 html 中，对于 ios JSContext 类可以帮助它绑定数据。

标签： android html ios css printing

【解决方案1】：

如果你想从你的 android 应用中显示图像，首先你需要将此 html 保存在 android 内部存储中，然后使用 webview 你可以按照上面给出的图像显示数据。

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

【讨论】：