Posts made by rconstantine

Thanks that worked. I'm not sure how I missed that part of the docs.

The download code is working:

res.download(request.data.reportInfo.reportName + '-' + request.data.reportInfo.locationAbbr + '.pdf')

But I really want to display in my iframe if possible.

I'm now getting this error: URIError: URI malformed

This is working for small PDFs:

myThis.$refs.reportFrame.src = res.toDataURI()

It's not working for large ones. Instead, the iframe I'm putting it in becomes empty. I tried to use

myThis.$refs.reportFrame.outerHTML = res.toString()

instead, but that doesn't work. I guess the toString function doesn't work on PDFs - and that makes sense. Is there another way I can send a PDF to an iframe?

I'm wondering if some of the speed issues I'm seeing is because there are thousands of console messages when I run a report with a large data set. Where can I turn them off?

I had to change one line:

            myThis.$refs.reportFrame.outerHTML = res.toString()

Large data sets were resulting in empty iframes. I'm not sure what res.toDataURI() is doing that wasn't working.

I'm having reports run from requests by my web client application. I have a loading bar, but I'd like to be able to adjust it based on the progress of the server. Is there something we can hook into to get that information? Or should I switch to a spinner instead of a loading bar?

I have two questions:

1. I'm using the web client's renderAsync call to run my report. Works great. I'm putting the result into an iframe and it displays just fine. But when I go to download it, the file is named 'download.pdf'. Where can I set the name to something better - like the report name plus parameters?

2. When I run a PDF report, I'd like to store the result on the server in addition to sending it to the client. How can I do that? Relatedly, where would it be stored so that I can get a listing of stored reports?

Got it working. For anyone using VueJS, you can see what I did below:

<iframe id="reportFrame"
                ref="reportFrame"
                style="background-color: white; margin: auto; height: 90%; width: 100%;"
        >
</iframe>

The above is actually in a Quasar q-dialog.

And here is the method where the callback is made:

onShowReport (val) {
      // console.log('showing report', val)
      this.showReport = val
      if (val) {
        let myThis = this
        let isPDF = this.isPDF
        let request = {
          template:
            {
              shortid: this.shortID
            },
          data: {
            reportInfo:
            {
              reportName: this.selectedName,
              locationName: this.facilityName,
              locationAbbr: this.facility.value
            },
            facility: this.facility.value
          }
        }
        this.$jsreport.renderAsync(request).then(function (res) {
          // console.log('Res toString', res.toString())
          if (isPDF) {
            myThis.$refs.reportFrame.type = 'application/pdf'
            myThis.$refs.reportFrame.src = res.toDataURI()
          } else {
            myThis.$refs.reportFrame.type = 'text/html'
            myThis.$refs.reportFrame.src = res.toDataURI()
          }
          // get the content as string
          // res.toString()
          // open download dialog
          // res.download('test.pdf')
        })
      }
    }

I'm not sure how to set the download filename of the PDF. Presently it shows as 'download.pdf'. I'll open another forum post with that question and one more.

Oh. I didn't realize there was another option. I was just looking at this: https://jsreport.net/learn/nodejs and figured since Vue is built on Node that I had to choose one of those. I'll go take a look at the one you mentioned. I guess the docs are here: https://jsreport.net/learn/browser-client

I've got this:

const jsreport = require('jsreport-client')

export default ({ Vue }) => {
  console.log('loading jsreport')
  if (process.env.DEV) {
    jsreport.serverUrl = 'https://pharmacyinformatics.local:3000/v1'
  } else {
    jsreport.serverUrl = 'https://pharmacyinformatics.local/server/v1'
  }// can add username, password after URL
  Vue.prototype.$jsreport = jsreport 
}

You can see I'm trying to add it to Vue so that it is accessible on all components. This works for literally a dozen other modules I'm using. I'm following the axios pattern here. But maybe I'm not actually creating an instance of the object? I thought the above did.

I then call it this way (in the same VueJS/Quasar application):

methods: {
    async renderReport (selectedName, shortID, facName, facAbbv) {
      let res = await this.$jsreport.render({
        template:
          {
            shortid: shortID
          },
        data: {
          reportInfo:
            {
              reportName: selectedName,
              locationName: facName,
              locationAbbr: facAbbv
            },
          facility: facAbbv
        }
      })

      let bodyBuffer = await res.body()
      console.log(bodyBuffer.toString())
    }
}

The error is this: "this.$jsreport.render is not a function".

render should be available per the first code block. I should have one jsreport object at this.$jsreport. So I don't know why it can't find it. Note that I do see the 'loading jsreport' console log as found in the first code block.

Ideas?

And this didn't either:

"authentication": {
      "cookieSession": {
        "secret": "dasd321as56d1sd5s61vdv32",
        "cookie": { "secure": false }
      },
      "admin": {
        "username" : "admin",
        "password": "password"
      }
    },

Still didn't work with:

"authentication": {
      "cookieSession": {
        "secret": "dasd321as56d1sd5s61vdv32"
      },
      "admin": {
        "username" : "admin",
        "password": "password"
      }
    },

Weird. My server app is HTTPS only and works great. Perhaps there's something I don't understand when it comes to placing jsreport inside my main server app. Are there other jsreport settings I need to add to my config file? Even calling the reports from Postman, I'm using HTTPS. It's just when I add the above that it doesn't let me in.

I do have the certificates defined in the config file. I'm using absolute paths as I couldn't figure out what to do to properly use relative paths. I'll paste my whole file below. (Note I removed the authentication changes so I could get it to work again):

{
  "extensions": {
    "authentication": {
      "enabled": false
    },
    "studio": {
      "enabled": true
    },
    "scripts": {
      "allowedModules": "*",
      "timeout": 140000,
      "strategy": "http-server"
    },
    "sample-template": {
      "createSamples": true
    },
    "child-templates": {
      "parallelLimit": 5
    }
  },
  "certificate": {
    "key": "C:\\Users\\constar1\\Documents\\SutterNow\\Express Projects\\AdminServer\\src\\tls\\pharmacyinformatics.local.key.pem",
    "cert": "C:\\Users\\constar1\\Documents\\SutterNow\\Express Projects\\AdminServer\\src\\tls\\pharmacyinformatics.local.crt.pem"
  },
  "store": {
    "provider": "fs"
  },
  "blobStorage": {
    "provider": "fs"
  },
  "logger": {
    "console": {
      "transport": "console",
      "level": "debug"
    },
    "file": {
      "transport": "file",
      "level": "info",
      "filename": "logs/reporter.log"
    },
    "error": {
      "transport": "file",
      "level": "error",
      "filename": "logs/error.log"
    }
  },
  "allowLocalFilesAccess": true,
  "templatingEngines": {
    "timeout": 180000,
    "strategy": "http-server",
    "templateCache": { "enabled": true }
  },
  "chrome": {
    "timeout": 180000
  },
  "appPath": "/reporting"
}

I just added the authentication bits to my jsreport.config.json file as found here: https://jsreport.net/learn/authentication

Specifically, I'm using this bit:

"authentication" : {
        "cookieSession": {
            "secret": "dasd321as56d1sd5s61vdv32",
                    "cookie": { "secure": true }       
        },
        "admin": {
            "username" : "admin",
            "password": "password"
        }
    }

When I log in using the credentials stated there, I'm presented with the login screen again and my log gives me this:

Options { where: { username: undefined, active: 1 } }
Executing (default): SELECT [id], [username], [displayName], [company], [department], [mail], [mobile], [directReports], [active], [createdAt], [updatedAt] FROM [users] AS [user] WHERE [user].[username] = NULL AND [user].[
active] = 1 ORDER BY [user].[id] OFFSET 0 ROWS FETCH NEXT 1 ROWS ONLY;
2019-07-08T20:35:59.960Z - info: Logging in user admin

Did I miss something?

I had one table. Converted it to DIVs. No change.

What can be done to speed up PDF generation? The report I've worked out is identical for both my HTML and PDF versions in terms of the content. All that the PDF adds is a header and a footer. Even if I remove the header and footer, the PDF still takes a while, although not the full 3 minutes. But at 1 minute per page, I'm worried. Many of my reports will be over 100 pages. I can't have users wait 100 minutes for 100 pages. Do different versions of headless chrome work at different speeds? Should I try the phantom option? Am I the only one with this issue? If so, what should I be looking for that I'm doing wrong?

BTW, I was on 2.4.0 and although I had my PDF working yesterday, it wasn't working today. I updated to 2.5.0 with the 2.5.1 version of studio, and now it does. No changes to my code.

Side note: thanks admins for helping me prep my pre-existing app to work with 2.5.0. It was all about moving the setup of jsreport to before any other middleware was added to my main app.

Thanks man. I've got a couple of weeks left on the demo license, but it's looking good. What I have left to try are: 1) calling the report from my client app and include parameters, 2) figuring out the scheduling module, 3) figuring out how to save any or all reports to the server for later viewing, and 4) send reports to users via email.

If I can do all of that, then that's everything I need and we can move forward on licensing. Thanks for the help so far.

I have a PDF footer template as defined here:

<div style="font-family: 'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px;">
    <hr>
    <span style="left: 35px; position: absolute; bottom: 0px;">Printed: {{getTodayFormatted}}</span>
    <span style="left: 400px; position: absolute; bottom: 0px;">Page {{$pdf.pageNumber}} of {{$pdf.pages.length}}</span>
    <span style="left: 680px; position: absolute; bottom: 0px;">SutterNow Reports</span>
</div>
<div>-</div>

The three spans show on the bottom of the page. The <hr> shows at the top of the page, before my header. The hyphen (which is defined in a DIV after the main DIV) also shows above the header!!! What is going on?

Also, I can't get the first DIV to be above the edge of the page. margin-bottom isn't moving it up. My footer is defined as 1.5cm tall, which should be enough.

Never mind. It does work presently. I thought I had tried what I used in that other module, but I guess I had a typo before. So I looked it up again, and it's the page-break-inside: avoid; property. I'm now able to prevent splitting a DIV and its contents between pages. This was particularly ugly when it wasn't working because these particular DIVs have borders. I imagine it should work for other elements too.