Search code examples
androidiosreact-nativepdfhtml-to-pdf

React native pass state/props value to custom <html> page?

I need to create a pdf invoice using html in react native. for that i'm using
'react-native-html-to-pdf'. Actually pdf is creating successfully. But my concern is i need to pass those values from state to that hardcoded html tag. So far i have hardcoded some values inside the tag. however i need to pass my state value instead of that.(To get clear idea, see the comment inside the code) is there any way to do that?

import RNHTMLtoPDF from "react-native-html-to-pdf";

this.state = {
  Balance: 100,
  Total: 200,
  Amount: 400,
};

onPressRequestButton = async () => {
  const html = `<html>
    <head>
        <meta charset="utf-8">
        <title>Invoice</title>
        <link rel="stylesheet" href="style.css">
        <link rel="license" href="https://www.opensource.org/licenses/mit-license/">
        <script src="script.js"></script>
    </head>
    <body>
        <header>
            <span><img alt="" src="http://www.jonathantneal.com/examples/invoice/logo.png"><input type="file" accept="image/*"></span>
        </header>
        <article>
            <h1>Recipient</h1>
            <table class="balance">
                <tr>
                    <th><span contenteditable>Total</span></th>
                    <td><span data-prefix>$</span><span>600.00</span></td> // here i need to set total amount {this.state.amount} is not working at all.
                </tr>
                <tr>
                    <th><span contenteditable>Amount Paid</span></th>
                    <td><span data-prefix>$</span><span contenteditable>600.00</span></td>
                </tr>
                <tr>
                    <th><span contenteditable>Balance Due</span></th>
                    <td><span data-prefix>$</span><span>600.00</span></td>
                </tr>
            </table>
        </article>
    </body>
    </html> `;

  let options = {
    html: html,
    fileName: "test",
    directory: "Documents",
  };

  let file = await RNHTMLtoPDF.convert(options);
  alert(file.filePath);
};
Solution

  • Here this is the work around

    onPressRequestButton = async () => {
  const Balance = this.state.Balancel;
  const Total = this.state.Total;
  const Amount = this.state.Amount;
  const html =
    `
<html>
   <head>
      <meta charset="utf-8">
      <title>Invoice</title>
      <link rel="stylesheet" href="style.css">
      <link rel="license" href="https://www.opensource.org/licenses/mit-license/">
      <script src="script.js"></script>
   </head>
   <body>
      <header>
         <span><img alt="" src="http://www.jonathantneal.com/examples/invoice/logo.png"><input type="file" accept="image/*"></span>
      </header>
      <article>
         <h1>Recipient</h1>
         <table class="balance">
            <tr>
               <th><span contenteditable>Total</span></th>
               <td><span data-prefix>$</span><span>` +
    Total +
    `</span></td>
               // here i need to set total amount {this.state.amount} is not working at all.
            </tr>
            <tr>
               <th><span contenteditable>Amount Paid</span></th>
               <td><span data-prefix>$</span><span contenteditable>` +
    Balance +
    `</span></td>
            </tr>
            <tr>
               <th><span contenteditable>Balance Due</span></th>
               <td><span data-prefix>$</span><span>` +
    Amount +
    `</span></td>
            </tr>
         </table>
      </article>
   </body>
</html>
`;
  let options = {
    html: html,
    fileName: "test",
    directory: "Documents",
  };
  let file = await RNHTMLtoPDF.convert(options);
  alert(file.filePath);
};