Expo print -IOS 上用于打印每一页的页脚答案

【问题标题】：Expo print -Footer on IOS fop printing every pageeExpo print -IOS 上用于打印每一页的页脚
【发布时间】：2023-01-27 00:28:48
【问题描述】：

我在这里寻找 HTML 表格 PDF 视图中的 CSS 页脚以在 IOS 设备中打印。

我将在我的代码下方分享，在那里我只能获得表格的页脚末尾，但我希望在 IOS 设备的每一页末尾都有页脚。

对于我的代码，它还在 android 中为我提供了每页末尾的页脚。但是我正在运行一个 IOS 设备，所以我希望在我的 PDF 视图中看到每页末尾的页脚。

请帮我在 IOS 设备上做。感谢您的尝试。

const html = `
<style>

  @page {
    margin: 0.1cm;
    size: landscape;
    orientation: landscape;
    size: A4;
  }




    .demo {
        border:1px solid #C0C0C0;
        border-collapse:collapse;
        padding:5px;
    page-break-inside:auto;

    margin-buttom:300px;

    table-layout:fixed;

    
    }
  .demo tr{
    page-break-inside:avoid; page-break-after:auto;
  }
    .demo th {
        border:2px solid #C0C0C0;
        padding:5px;
        background:#F0F0F0;
    }
    .demo td {
        border:2px solid #C0C0C0;
        padding:5px;
    text-align: center;
    }
 

  .images {
    text-align: center; 
  }

  body{        
    padding-top: 60px;
    padding-bottom: 60px;

    
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  color: black;

  font-weight: bold;
  text-align: center;
  flex-direction:column;

}
.page-number:after { 
  counter-increment: pages; 
  content: counter(page) " of " counter(pages); 
 }


</style>
<html>

<div class="images">
<img src="https://www.comdelta.com.my/wp-content/uploads/2021/10/Logo.jpeg" 
alt="Comdelta Technologies Sdn. Bhd" 
width="200" height="100"/>
</div>

<table class="demo">
    <h2>Comdelta Technologies Sdn. Bhd</h2>
    <thead>
    <tr>
        <th>Lamp No</th>
        <th>Road</th>
        
    </tr>
    </thead>
    <tbody>
 
  <tr>
        <td>&nbsp;${htmlDataLm[0]}</td>
        <td>&nbsp;${htmlDataR[0]}</td>
        <td>&nbsp;${htmlDataM[0]}</td>
        <td>&nbsp;${htmlDataS[0]}</td>
        <td>&nbsp;${htmlDataL[0]}</td>
        <td>&nbsp;${htmlDataB[0]}</td>
        <td>&nbsp;${htmlDataPG[0]}</td>
        <td>&nbsp;${htmlDataPC[0]}</td>
        <td>&nbsp;${htmlDataUP[0]}</td>
    </tr>
  <tr>
        <td>&nbsp;${htmlDataLm[1]}</td>
        <td>&nbsp;${htmlDataR[1]}</td>
        <td>&nbsp;${htmlDataM[1]}</td>
        <td>&nbsp;${htmlDataS[1]}</td>
        <td>&nbsp;${htmlDataL[1]}</td>
        <td>&nbsp;${htmlDataB[1]}</td>
        <td>&nbsp;${htmlDataPG[1]}</td>
        <td>&nbsp;${htmlDataPC[1]}</td>
        <td>&nbsp;${htmlDataUP[1]}</td>
    </tr>



    <tbody>
</table>
<p>
&nbsp;
&nbsp;
&nbsp;
&nbsp;
</p>
<div class="footer ">

<span class="page-number">Page </span>

<p>Copyright &copy; 2022 Comdelta Technologies Sdn. Bhd.All rights reserved.</p>

</div >








</html>



`;

const generatePdf = async () => {

  const { uri } = await printToFileAsync({
    html,
    margins: {
      left: 20,
      top: 20,
      right: 20,
      bottom: 20
  },

  });
  console.log('File has been saved to:', uri);
  await shareAsync(uri, { UTI: '.pdf', mimeType: 'application/pdf' });
}

【问题讨论】：

标签： html css styles footer

【解决方案1】：

你找到解决办法了吗？我也有同样的问题

【讨论】：