Cannot Print with Cordova

ebena

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?

metalsadman

@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.

ebena

@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.

ebena

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.

No More Posting New Topics!

Cannot Print with Cordova