Cannot Print with Cordova



  • Please I need help with identifying while I cannot print using Cordova printer plugins with this code.

    <script>
    import { LocalStorage } from 'quasar'
    export default {
      name: 'AnalysisPage',
      data () {
        return {
          analysisData: '',
          selected: []
        }
      },
      mounted () {
        if (LocalStorage.has('analysisData')) {
          this.analysisData = LocalStorage.getItem('analysisData')
          LocalStorage.remove('analysisData')
        }
        if (LocalStorage.has('selected')) {
          this.selected = JSON.parse(LocalStorage.getItem('selected'))
        }
      },
      methods: {
    
    printReport () {
          var newstr = document.getElementById('analysis').innerHTML
          var div = document.createElement('div')
          div.className = 'listPrint'
          div.innerHTML = this.getIngredientList()
          const prtHtml = '<h4>Feeding System</h4>'
          let styleHtml = ''
          for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
            styleHtml += node.outerHTML
          }
          const winPrint = window.open('')
          winPrint.document.write(`<!DOCTYPE html>
            <html>
            <head>
            <title>Feeding System|FeedCalc</title>
            ${styleHtml}
            </head>
            <body>
            ${prtHtml}`
          )
          winPrint.document.body.append(div)
          winPrint.document.write(`${newstr}`)
          winPrint.document.write(`</body>
            </html>`)
          winPrint.document.close()
          cordova.plugins.printer.print(winPrint, 'analysis.html')
        },
    
     getIngredientList () {
          var table = '<table><tr><th>Ingredients</th><th>Quantity (Kg)</th><th>Price / Kg</th><th>% / Diet</th></tr><tr>'
          // const fragment = new DocumentFragment()
          if (this.selected.length) {
            for (let i = 0; i < this.selected.length; ++i) {
              table += '<td>' + this.selected[i].name + '</td><td>' + this.selected[i].qty + '</td><td>' + this.selected[i].pricekg + '</td><td>' + (this.selected[i].qty * 100 / this.analysisData.total).toFixed(2) + '</td></<td></tr><tr>'
            }
          }
          table += '</tr></table>'
          return table
        }
    }
    
    

    My intention is to print two different sections of the page. One section is printed as it is, using innerHTML, while the list of items selected from a multiple selection Qtable from the second is used to form a table using this.getIngredientList()

    On initiating print, the app generate a page accurately, but no printer dialog shows up.

    Please, what am I not doing right?



  • @ebena can’t really tell what’s wrong with that cordova.plugins.printer.print(someHtmlCode, {someOpts} ) works fine on my app. you should put some console.logs there and check those in your ide’s logcat.



  • @metalsadman, thank you. I have been trying to debug it.

    I changed to

    winPrint.cardova.plugins.printer.print()
    winPrint.close()
    

    And it displays print dialog and prints.
    However, winPrint.close() is not executed. the generated page by winPrint= window.open() remain opened and I have to forced the app to exit. Any thoughts on why page got sticker after printing.



  • although, I haven’t figure out the why window.close() refused to be called/executed, this is what I finally used,
    ** pass the HTML equivalent of the page to Cordova printer.

    
        const winPrint = (`<!DOCTYPE html>
                <html>
                <head>
                <title>ShopIt</title>
                ${styleHtml}
                </head>
                <body>
                ${prtHtml}`
              )
    
         cordova.plugins.printer.print(winPrint, { name: 'report' })
    
    

    I hope this helps someone.

    Thanks to @metalsadman for his time and support.


Log in to reply