Question

我想在我的React Native应用程序中生成pdf。我要在其中显示表，其中在加载文档时动态生成行及其数据。我已经使用html和javascript生成了该表，但是现在的问题是生成pdf时未呈现javascript代码。作为结果，pdf上仅显示静态html代码。

我在我的项目中使用react-native-html-to-pdf库。我可能会发现很难迭代的所有问题。我只能够打印html的静态字符串，但不能打印其中的动态数据。

需要立即帮助。谢谢！

代码：

import React, { Component } from 'react';
import { View, Text, TouchableOpacity,TouchableHighlight} from 'react-native';
import RNHTMLtoPDF from 'react-native-html-to-pdf';

export default class CreatePDFExample extends Component{

    async createPDF() {
    let options = {

      html: `<!DOCTYPE html>
<html>
<head>
    <title>Report</title>
    <style>
        .mainContainer {
            width: 100%;
            border: 2px solid #000;
            border-bottom-width: 0px;
        }

        .headerContainer {
            text-align: center;
            border-bottom: 2px solid #000;
        }

        .middleContainer {
            margin-left: 5%;
            margin-top: 5%;
            margin-bottom: 1%;
        }

        .tableContent{
            width: 100%;
            border-collapse: collapse;
            border-top: 0px solid #000;
        }
        .tableContent td{
            text-align: center;
        }

        .bottomline {
            width: 100%;
            border-color: #000;
            border-style: solid;
            bottom-width: 1px;
            border-top-width: 0px;
        }
        hr{
            border: 1px solid #000; 
            margin-left: 10%;
            margin-right: 10%;
        }
        .sign td{
            border: 2px solid #000;
            padding-top: 5%;
            padding-bottom: 5%;
        }


    </style>

    <script type="text/javascript">


          function addRow() {
            var table = document.getElementById("tble");

            var colCount = table.rows[0].cells.length;   
            var rowCount = 5;  //length of database items

            for(var i = 0; i < rowCount; i++){

                var row = table.insertRow(1);     //Insert Row from position 1

                var srNo = row.insertCell(0);
                var date = row.insertCell(1);
                var particular = row.insertCell(2);
                var type = row.insertCell(3);
                var currency = row.insertCell(4);
                var amount = row.insertCell(5);
                var remark = row.insertCell(6);

                for (var j = 0; j < colCount; j++){
                    srNo.innerHTML = "1";
                    date.innerHTML = "xxxx";
                    particular.innerHTML = "xxxx";
                    type.innerHTML = "xxxx";
                    currency.innerHTML = "xxxx";
                    amount.innerHTML = "xxx";
                    remark.innerHTML = "xxxx";
                }
            }     
        }

    </script>
</head>

<body onload="addRow()">
    <div class="mainContainer">

        <div class="headerContainer">
            <h3>MY SHEET</h3>
        </div>

        <div class="middleContainer">
            <table>
                <tr>
                    <td><b>Name:-</b></td>
                    <td></td>
                </tr>

                <tr>
                    <td><b>Destination:-</b></td>
                    <td></td>
                </tr>

                <tr>
                    <td><b>Date:-</b></td>
                    <td></td>
                </tr>
            </table>
        </div>

        <div>
            <table id = "tble" class="tableContent" border="1">
                <tr style = "border: 2px solid #000">
                    <th>Sr.No</th>
                    <th>Date</th>
                    <th>Particulars</th>
                    <th>Type</th> 
                    <th>Currency</th>
                    <th>Amount</th>
                    <th>Remarks</th>
                </tr>

                <tr style = "border: 2px solid #000">
                    <td></td>
                    <td colspan="2"><b>TOTAL</b></td>
                    <td style="text-align: right"><b></b></td>
                    <td style="text-align: right"><b></b></td>
                    <td style="text-align: right"><b></b></td>
                    <td style="text-align: right"><b></b></td>
                </tr>


            </table>
        </div>


    </div>
</body>

</html>`,

      fileName: 'test',
      directory: 'docs'
    };

    let file = await RNHTMLtoPDF.convert(options);
    console.log(file.filePath);
  }


  render() {
      return(
          <View>
        <TouchableHighlight onPress={this.createPDF.bind(this)}>
        <Text>Create PDF</Text>
      </TouchableHighlight>
    </View>
      );
  } 
}

Answer 1

只需使用简单的ES6模板函数即可传递动态数据。

例如

createTemplate = ({ firstName = 'Roger' }) => {
  return `
    <html>
    //...
      <p>${firstName}</p>
    </html>
  }`
}

然后

async createPDF() {
  let options = {
    html: createTemplate({ name: 'Sanakhatun' }),
  };

  let file = await RNHTMLtoPDF.convert(options)
  // ...
}

Answer 2

将行数据推入数组中，并用反勾表示，

在这里放入数组

this.reportData.push(
              `<tr style="text-align:center">
                <td>${val.prevId}</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
              </tr>`,
            );

在这里渲染

await RNPrint.print({
      html: `<html>

      <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <style>
              body {
                  font-family: calibri;
              }
      
              table,
              tr,
              td {
                  border: 1px solid #30BCC9;
                  border-collapse: collapse;
              }
      
              .page_break {
                  page-break-before: always;
              }
      
              .badge {
                  display: inline-block;
                  padding: 0.25em 0.4em;
                  font-size: 72%;
                  font-weight: 300;
                  line-height: 1;
                  text-align: center;
                  white-space: nowrap;
                  vertical-align: baseline;
                  border-radius: 0.25rem;
                  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
              }
      
              .badge-pill {
                  padding-right: 0.6em;
                  padding-left: 0.6em;
                  border-radius: 10rem;
              }
      
              .badge-info {
                  color: #fff;
                  background-color: #30BCC9;
              }
      
              .white {
                  border-color: #fff !important;
              }
          </style>
      </head>
      
      <body>
          <div style="width: 100%; text-align: center;">
              <h1 style="background-color: #30BCC9; color: #fff; padding: 20px;">KBC FUTSAL</h1>
              <h5 style="color: #30BCC9;">Jl. Kerja Bakti No.22, Pondok Cina, Kota Depok, Jawa Barat 16424</h5>
              <hr style="border-top: 2px solid #30BCC9;">
          </div>
          <h2 style="font-weight: bold;">Laporan Penyewaan <sup class="badge badge-pill badge-info"
                  style="font-weight: 300 !important;"> ${moment(date).format(
                    'DD MMMM YYYY',
                  )} - ${moment(dateTo).format('DD MMMM YYYY')}</sup></h2>
          <table cellpadding="5" style="width: 100%">
              <thead>
                  <tr style="text-align: center; background-color: #30BCC9; color: #fff;">
                      <td class="white">ID</td>
                      <td class="white">Nama Team</td>
                      <td class="white">Tanggal</td>
                      <td class="white">Lama Main</td>
                  </tr>
              </thead>
              <tbody>
                  ${reportData}
              </tbody>
          </table>
          <div style="text-align: right; margin-top: 25px; margin-right: 50px;">Depok, ${moment().format(
            'DD MMMM YYYY',
          )}</div>
      </body>
      
      </html>`,
    });

在React Native中使用react-native-html-to-pdf库时，如何在html中生成具有动态值的html表？

2 个答案: