jsreport-studio preview



  • Please help me.
    I have successfully generated the pdf file however I don't know how can I preview it on the js-report studio
    I checked the API documentation it says I should use Studio.Preview(param) but I don't know what should I pass inside of the studio preview.
    Please provide an example, preferrably a source code.



  • Hi, please elaborate more on what you do. Are you trying to implement a custom jsreport extension? Because the Studio.Preview(param) is for use just for that. What such extension should do?



  • 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)



  • 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?



  • 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>",
    }
    })



  • Please help me


  • administrators

    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'
    }
    


  • This post is deleted!


  • 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



  • 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
    }
    })
    })


  • administrators

    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
        }
      })
    })
    


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


Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.