Printing from ionic vue app

Ionic Native
1

I checked out the docs which only has example code for Angular. Tried to adapt it for vue:

import {Printer} from '@ionic-native/printer/ngx';

methods: {
printSpecs() {
      Printer.isAvailable()
          .then(() => {
            const options = {
              name: 'MyDocument',
              duplex: true,
              orientation: 'landscape',
              monochrome: true
            }

            const content = 'this is a test print'
            Printer.print(content, options)
                .then(() => {
                  console.log('Print success');
                });
          });
    },
}

But get the error: Uncaught TypeError: _ionic_native_printer_ngx__WEBPACK_IMPORTED_MODULE_12__.Printer.isAvailable is not a function

I’ve fiddled about with various configurations but nothing has worked. Any ideas how I can get this to work?

2

The main Ionic Vue docs say “use Capacitor”.

1 Like
3

Good morning, did you ever get this working?, if so, share your solution

4

I did, but it’s a bit of a hacky solution that uses window.print():

printSpec(elementId) {
      const modal = document.getElementById(elementId)
      const cloned = modal.cloneNode(true);
      let section = document.getElementById("print")

      if (!section) {
        section = document.createElement("div")
        section.id = "print"
        document.body.appendChild(section)
      }

      section.innerHTML = "";
      section.appendChild(cloned);
      window.print();
    },
5

So you just defined it as a function and called it on button click?

6

Yeah dude, exactly like that. Just pass the element id of the element you want to print.