CapacitorJS Printer is a javascript based opensource npm project to print html content. In this tutorial we will use a capacitorjs plugin developed by Softtl to print a HTML document from android mobile device. The name of the plugin is capacitrojs-printer.
CapacitorJS is an Open Source Framework used for building Cross-Platform native mobile applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Android and macOS operating systems. It combines the Chromium engine and NodeJS into a Single Runtime.
In certain mobile applications, developers would like to provide a feature wherein the user can download or print the contents from within the application. For example, in a banking application, the user would like to print his/her account statement being displayed on the screen. Capacitorjs, in addition to saving the contents as a PDF file, also provides a way by which we can directly print the contents from your android mobile device. You will have to connect a printer with your mobile by Bluetooth, And capacitrojs-printer plugin will do all the other work to print html content.
Step 1: Navigate to the capacitor project Directory, and run the following command. It will install the capacitorjs-printer plugin on your nodejs project:
npm install capacitorjs-printer
npx cap syncStep 2: Use the printHtml code where you want to print a html content. Following example show you how to call printHtml function using capacitrojs-printer on vuejs.
// Import capacitorjs-printer on your project's .vue file
import { CapacitorjsPrinter } from 'capacitorjs-printer';
// Call the Print function to print a html content
await CapacitorjsPrinter.printHtml({ "value": htmlContent });
Step 3: Build your android app using android studio or command line and test it on your android device or emulator.
