jsreport-studio preview

cdaliwan15

I'm creating a template (json format) on the backend that eventually get previewed on the js-report studio. I wanted to know what are the parameter format to be passed on the Preview API. It would be great if you could show me a sample code to preview a template using js report template

on the documentation: Studio.Preview(params)

jan_blaha

I'm confused. So you trigger the rendering of the template from the backend. You get back stream and you want to redirect it to some existing browser tab with jsreport studio?

cdaliwan15

Yes I do the rendering from the backend using this code below then once rendered I want to preview the report on the jsreport-studio (like the normal way when you click run)

*This code just generate the report on the location C:\Users\AppData\Local\Temp\jsreport\autocleanup*

axios.post('http://localhost/api/report', {
"template": {
"name":"demo",
"recipe":"chrome-pdf",
"engine":"handlebars",
"content":"<html> <body> <h1> Sample </h1> </body> </html>",
}
})

cdaliwan15

Please help me

bjrmatos

hi @cdaliwan15, an example can be found on the studio code (I know it is not ideal but we lack documentation for the studio API). here for example you can see the params expected for such API, so you can call it like this:

Studio.preview({
  id: 'some unique id',
  type: 'report',
  data: {
    template: {
      name: 'the template name of what you just rendered',
      shortid: 'the shortid of the template that you just rendered'
    },
    reportSrc
    reportFile
  }
})

the reportSrc is an object URL created from the binary/buffer data of the output report, you can see here that we create it like this, so for reference the creation can look like this for a pdf report:

const reportSrc = URL.createObjectURL(
   // reportBuffer is an UInt8Array, which is the type that represents binary data, you can get this binary from your fetch, you just need to tell axios that you want binary data as the response
   new window.File([reportBuffer], 'mypdf.pdf', {
      type: 'application/pdf' // this is the mime type for a pdf report, for a report using html recipe the value is its mime type which is text/html, you get the idea
   })
)

the reportFile is the raw information and metadata about the report being shown in the preview, this data is used to make the download and other actions in the preview area to work.

const reportFile =  {
  filename: 'mypdf.pdf',
  rawData: reportBuffer, // the reportBuffer is the same as explained in above, it is the binary data that represents the output report
  contentType: 'application/pdf'
}

cdaliwan15

This post is deleted!

cdaliwan15

Hi @bjrmatos, Thank you so much for your help! preview panel is now showing however the data does not show on the page, it's only shows blank page. please help me to show the data on preview
0_1658136414769_upload-778316cf-7db9-468d-ab62-93fab439b2d7

cdaliwan15

Here's my code below

const headers = {
'responseType': 'arraybuffer',
'Content-Type': 'application/json',
'Accept': 'application/pdf'
}

await axios.post('http://localhost/api/report', {
"template": {
"name":"demo",
"recipe":"chrome-pdf",
"engine":"handlebars",
"content":"<html> <body> <p> hello world </p> </body> </html>",
}
}, {
headers: {headers}
}).then((response) => {
let rptSrc = URL.createObjectURL(
new window.File([response.data], 'demo.pdf', {
type: 'application/pdf'
})
)
let reportFile = {
filename: 'demo.pdf',
rawData: [response.data],
contentType: 'application/pdf'
}
Studio.preview({
id: uid,
type: 'report',
data: {
template: {
name: 'MYTemplate',
shortid: shortid.generate()
},
reportSrc: rptSrc,
reportFile: reportFile
}
})
})

bjrmatos

hi @cdaliwan15, i believe your mistake is that you are putting responseType: 'arraybuffer' as HTTP headers, but instead axios expects it on the options parameters. change your code to be like this:

const headers = {
  'Content-Type': 'application/json',
  'Accept': 'application/pdf'
}

await axios.post('http://localhost:5488/api/report', {
  "template": {
    "name":"demo",
    "recipe":"chrome-pdf",
    "engine":"handlebars",
    "content":"<html> <body> <p> hello world </p> </body> </html>",
  }
}, {
  headers: {headers},
  responseType: 'arraybuffer'
}).then((response) => {
  console.log(response.data)
  let rptSrc = URL.createObjectURL(
    new window.File([response.data], 'demo.pdf', {
    type: 'application/pdf'
  }))

  let reportFile = {
    filename: 'demo.pdf',
    rawData: [response.data],
    contentType: 'application/pdf'
  }

  Studio.preview({
    id: uid,
    type: 'report',
    data: {
      template: {
        name: 'MYTemplate',
        shortid: shortid.generate()
      },
      reportSrc: rptSrc,
      reportFile: reportFile
    }
  })
})

cdaliwan15

Oooppps I'm sorry I overlooked that one, Thank you so much @bjrmatos for helping me! it is now working