How to render to a placeholder when sing renderAsync



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

  • administrators

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


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



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


  • administrators

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

Log in to reply
 

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