How to render to a placeholder when sing renderAsync

lattamore

When Rendering via jsreport.render(placeholder, request) works fine. Because of the time it takes for some reports to render we would like to put up a spinner and remove it when finished. The only way I can see to do this is using the jsreport.renderAsync(request) using the promise when returned to stop the spinner. This seems to work fine, but how do I now use the response and render it to the placeholder?

It is a phantom pdf template being rendered by the way.

<div ref='placeholder' id='placeholder'></div>

// old way works good
jsreport.render(placeholder, request)

// new async way so we can hide the spinner
jsreport.renderAsync(request).then((res) => {
    res... // what goes here so we can render to placeholder div?
    Loading.hide()
})

bjrmatos

hi! you can try this:

// new async way so we can hide the spinner
jsreport.renderAsync(request).then((res) => {
    var placeholder = document.getElementById('placeholder')
    var iframe = document.createElement('iframe')
    
    iframe.src = res.toDataURI()
        iframe.style.width = '100%'
        iframe.style.height = '100%'

    // clear placeholder
        while (placeholder.firstChild) {
          placeholder.removeChild(placeholder.firstChild);
        }

    placeholder.appendChild(iframe);

    Loading.hide()
})

lattamore

This works, thank you. Now just need to unmangle the report name showed in the PDF viewer through chrome.

lattamore

any ideas using the solution above how to get the pdf name shown in the browser viewer to not be a mangled name?

bjrmatos

hmm no, unfortunately browser pdf viewer has no way to customize the name shown when using this technique.

you can try this that improves the mangled name a little more.

jsreport.renderAsync(request).then((res) => {
 var contentType = 'application/pdf'
           var dataView = new DataView(response)
           var blob
var objectURL

           try {
             blob = new Blob([dataView], { type: contentType })
           } catch (e) {
             if (e.name === 'InvalidStateError') {
               var byteArray = new Uint8Array(response)
               blob = new Blob([byteArray.buffer], { type: contentType })
             } else {
               throw e
             }
           }

          objectURL = URL.createObjectURL(blob)

          var placeholder = document.getElementById('placeholder')
   var iframe = document.createElement('iframe')
   
   iframe.src = objectURL
       iframe.style.width = '100%'
       iframe.style.height = '100%'

   // clear placeholder
       while (placeholder.firstChild) {
         placeholder.removeChild(placeholder.firstChild);
       }

   placeholder.appendChild(iframe);

   Loading.hide()
})