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