HTML to PDF error

Technical Discussion
21

Well, I can work around the grid issue, and here is output after setting SetStderr:
Warning: undefined:0 ReferenceError: Can't find variable: formatCurrency

Oh, and my javascript is inline, not in an external file.

22

It looks like your javascript has an error. What does your JS look like?

23 
    const formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        currencySign: 'accounting'
    });

    function formatCurrency(amount) {
        let formattedAmount = formatter.format(amount);
        formattedAmount = formattedAmount.replace("$", "");
        console.log(formattedAmount);
        return formattedAmount;
    }
24

It’s likely a problem with order of execution. Where in the page did you put this JavaScript and how are you then calling that function? See also:

25

I have that javascript in the . Initially I put it at the end of the html file, but it doesn’t work there. Sorry, I should have included where I call it from.

                        <td style="text-align:right">
                            <div id="{{$sectionName}}{{$index}}">
                                <script>document.getElementById("{{$sectionName}}{{$index}}").innerText =
                                    formatCurrency({{$accountElement.Balance}})</script>
                            </div>
                        </td>

after executing the template and in the <body>:

 <td style="text-align:right">
         <div id="Current assets0">
            <script>document.getElementById("Current assets0").innerText =
                                    formatCurrency( 3577 )</script>
         </div>
</td>
26

Why don’t you just write the HTML formatted how you want it? No script required.

If you DO want to run format it via a script, you could just apply a class to all of your items and loop through them after document load and apply your format. Assume you have a table like this:

<table>
  <thead>
    <tr>
      <th>User</th>
      <th>Amt</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jane Doe</td>
      <!-- Note currency class -->
      <td class="currency">1234</td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td class="currency">1234</td>
    </tr>
  </tbody>
</table>

You could refactor your javascript to be a single item that runs in a loop and formats anything with the currency class:

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  currencySign: "accounting"
});

function formatCurrency(amount) {
  let formattedAmount = formatter.format(amount);
  formattedAmount = formattedAmount.replace("$", "");
  console.log(formattedAmount);
  return formattedAmount;
}

function formatAll() {
  // Get everything in our document with the "currency"
  // class.
  var currencyValues = document.querySelectorAll(".currency");
  // Iterate over them and apply our format
  for (var i = 0; i < currencyValues.length; i++) {
    // Replace inner HTML with formatted version
    currencyValues[i].innerHTML = formatCurrency(currencyValues[i].innerHTML);
  }
}

// Wait for DOM content to be loaded then run formatAll.
document.addEventListener('DOMContentLoaded', formatAll, false);

I tried to add comments to the important parts there. Here’s a working example you can run in your browser (click “run pen” then you can flip between HTML/JS tabs):

27

Wow, you must have been doing this stuff for quite awhile. I’ll try that. Of course, it still doesn’t explain why the javascript doesn’t run in the pdf wrapper when it works fine in the browser.

28

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.