NodeJS PDF: Only working properly when debugger is attached

Question

I have a strange issue that is happening on one of my projects (but not other projects) and I can't see anyone else having anything remotely similar. (I apologise in advance for lack of proper examples as this is actual company code).

The problem I have is in a .NET Core 2 project I am trying to use nodejs to create a PDF (like I have in a second project). However, the PDF only generates properly when the Visual Studio (2017) debugger is attached.

try
{
    var result = await nodeServices.InvokeAsync<byte[]>(pdfSettings, viewWithAbsoluteLinks);

    string invoicePath = _configuration.GetSection("AppSettings")["InvoicePath"];
    string filename = Path.Combine(invoicePath, "invoice.pdf");

    FileUtils.WriteToFile(filename, result);

    return Json(new { success = true, size = result.Count(), viewAsHtml, viewWithAbsoluteLinks, environment, pdfSettings, result });
}
catch
{
    return Json(new { success = false });
}

I am using jsrender with phantom-pdf, and when I attach the debugger in Visual Studio result is 69318. However, when I run without the debugger attached result = 66167 bytes.

To debug I returned the variable viewWithAbsoluteLinks so I could see if there was any difference, and in both cases that variable is the same.

viewWithAbsoluteLinks is:

<html>

<head>
  <style>
    .pdf-hidden {
      display: none;
    }

    .pdf-visible {
      display: block !important;
    }
  </style>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Invoice</title>
  <link rel="stylesheet" href="http://localhost:10795/lib/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="http://localhost:10795/css/site.css">
  <link rel="stylesheet" href="http://localhost:10795/css/site.theme.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
    crossorigin="anonymous">
  <link rel="stylesheet" href="http://localhost:10795/lib/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
  <style>
    body {
      font-family: "DIN 2014 Light", 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      color: #000;
    }
  </style>
</head>

<body>
  <div class="pull-right" style="border: 1px solid #0f0">
    <img src="http://localhost:10795/images/training-logo.png">
  </div>
  <div style="padding-top: 50px;">
    <table style="width: 100%; border: 1px solid #000">
      <tbody>
        <tr>
          <td style="border: 1px solid #f00"> Address </td>
          <td> Invoice </td>
        </tr>
      </tbody>
    </table>
  </div>
  <script type="text/javascript">        window.JSREPORT_READY_TO_START = true;    </script>
</body>

</html>

When the debugger is attached the text within the tags shows in the PDF. When the debugger is not attached the text does not appear. (The s have different colour borders - and the colours display properly)

I am assuming running when debugging is altering something, but I'm not sure what. I thought at first it was just that CSS was making the text white, but the file sizes suggest the text really isn't there.

Does anyone have any ideas what Visual Studio may be doing to make it work properly when the debugger is attached?

I can't edit my question: The section below the HTML example should read: When the debugger is attached the text within the TD tags shows in the PDF. When the debugger is not attached the text does not appear. (The TDs have different colour borders - and the colours display properly) — Nigel Ellis, Jul 02 '18 at 08:39

score 0 · Accepted Answer · answered Jul 02 '18 at 08:53

0

After struggling for a while I may have just solved the issue. Timing.

Event though the debugger was attached (no breakpoints, just attached) it's possible that this caused a small delay just long enough for the PDF to be generated.

A quick look on SO and I found this: How to set time delay in javascript

I added a delay of 1 second and it generated the PDF with text correctly without the debugger being attached.

answered Jul 02 '18 at 08:53

Nigel Ellis

601
1
8
18

Unfortunately a new task has taken precedence; this seemed to work for me, but I haven't been working on this so I can't be certain it's fixed yet. – Nigel Ellis Jul 09 '18 at 11:45
@Nigel Ellis, It would be better if you could test it in your side, so we could know that whether it could help you resolve this issue and help other community members who get the same issue. Waiting for you. Have a nice day:) – Jack Zhai Jul 23 '18 at 09:08
I have gone back onto this task - and it still appears to be the case that when there are custom fonts a delay is necessary (around 1 second) to load the fonts. Images do not need a delay, though. – Nigel Ellis Aug 14 '18 at 15:37

NodeJS PDF: Only working properly when debugger is attached

1 Answers1