如何在Cordova Android AngularJS应用中实现打印功能？

Let's break down your problem and fix it step by step:

Why You're Seeing "ReferenceError: cordova is not defined" #

The core issue here is that Cordova's APIs (including plugins) are only available after the deviceready event fires. Your AngularJS controller is trying to access cordova.plugins.printer before Cordova has fully initialized on the Android device. The browser version worked because it doesn't rely on Cordova's native bridge.

Step 1: Wait for deviceready Before Using Cordova Plugins #

You need to ensure your print function (and any other Cordova plugin calls) only run after the deviceready event is triggered. Here's how to integrate this into your AngularJS controller:

Updated Controller Code #

app.controller('ReciepieController', ['$scope', '$http', '$rootScope', '$state', '$window', '$uibModal', function ($scope, $http, $rootScope, $state, $window, $uibModal) {
    $("#header").show();
    $rootScope.back = true;
    $rootScope.enableback = true;
    $scope.toggleText = "See More...";
    $scope.toggle = 0;
    
    // Flag to track if Cordova is ready
    $scope.cordovaReady = false;

    // Listen for Cordova's deviceready event
    document.addEventListener("deviceready", function() {
        $scope.$apply(function() {
            $scope.cordovaReady = true;
            console.log("Cordova initialized - plugins are now available");
        });
    }, false);

    $scope.print = function (divName) {
        console.log('Print function triggered');
        
        // Only proceed if Cordova is ready
        if (!$scope.cordovaReady) {
            alert("Cordova is not ready yet. Please wait a moment and try again.");
            return;
        }

        var pageContent = document.getElementById(divName).innerHTML;
        // Use the printer plugin with proper error handling
        cordova.plugins.printer.print(pageContent, {
            name: 'Recipe Document',
            duplex: 'none'
        }, function (success) {
            alert('Printing finished or canceled');
        }, function (error) {
            alert('Print failed: ' + error);
        });
    }

    // Rest of your controller code remains the same...
    $scope.change = function () {
        if ($scope.toggle == 0) {
            $scope.toggleText = "See Less...";
            $scope.toggle = 1;
        } else if ($scope.toggle == 1) {
            $scope.toggleText = "See More...";
            $scope.toggle = 0;
        }
    }

    // ... (rest of your existing controller logic)
}]);

Step 2: Verify Plugin Installation #

Even though your package.json lists cordova-plugin-printer, it's worth double-checking the plugin is properly installed on the Android platform:

• Run these commands in your project root:

  cordova plugin remove cordova-plugin-printer
  cordova plugin add cordova-plugin-printer@0.7.3
  cordova prepare android
  

This ensures the plugin files are correctly copied to the Android project.

Step 3: Test on a Real Device or Emulator #

Note that Cordova plugins won't work in a standard web browser. You need to:

• Build the Android app with cordova build android
• Deploy it to an emulator or physical Android device using cordova run android

Step 4: Fixing the Original Browser-Only Print Code #

Your initial print code uses window.open() which works in browsers but not in Cordova's WebView on Android. The plugin-based approach above replaces that with native printing support, which will work on Android devices.

Additional Checks #

• Make sure your config.xml includes the necessary permissions for printing (the plugin usually adds these automatically, but it's good to verify):

  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  

• Ensure the content you're trying to print (the #print div) has valid HTML/CSS. The plugin may not render complex styles perfectly, so keep your print-friendly CSS simple if you run into formatting issues.

内容的提问来源于stack exchange，提问作者Vivek Nuna