如何使用 Cordova 在 Android 上实现打印？

Posted 2023-03-05

【中文标题】如何使用 Cordova 在 Android 上实现打印？

【英文标题】：How to imlement print on Android using Cordova?

【发布时间】：2018-10-31 21:56:30

【问题描述】：

我想在 android 应用程序中实现打印功能，我正在使用 AngularJS。我试过下面的代码，但它只适用于浏览器，它不适用于 Android。

AngularJS：

$scope.print = function (divName) 
    var w = window.open();
    w.document.write($('#' + divName).html());
    w.print();
    w.close();

HTML：

<img ng-click="print('print');" class="card-img-top image-responsive" src="./plugins/images/print.png" >


<div id="print" style="display:none;">
    <style>
        @page 
            size: auto;
            margin: 7mm;
        

        @media all 
            .page-break 
                display: none;
            
        

        @media print 
            .page-break 
                display: block;
                page-break-before: always;
            
        
    </style>
    <div class="row">
    </div>
</div> 

更新：

我已经尝试了@VicJordan 提供的解决方案，但它给出了以下错误。

ReferenceError: cordova 没有在 ChildScope.$scope.print 中定义

(MyJs.js:37) at fn (eval at compile (angular.js:15500),

:4:149) 在 ChildScope.$eval 的回调 (angular.js:27285) 处

(angular.js:18372) 在 ChildScope.$apply (angular.js:18472) 在

HTML 图像元素。 (angular.js:27290) 在

HTMLImageElement.dispatch (jquery.min.js:3) 在

HTMLImageElement.r.handle (jquery.min.js:3)

Package.json

    "name": "helloworld",
    "displayName": "HelloCordova",
    "version": "1.0.0",
    "description": "A sample Apache Cordova application that responds to the deviceready event.",
    "main": "index.js",
    "scripts": 
        "test": "echo \"Error: no test specified\" && exit 1"
    ,
    "author": "Apache Cordova Team",
    "license": "Apache-2.0",
    "dependencies": 
        "cordova-android": "^7.0.0",
        "cordova-browser": "^5.0.3",
        "cordova-plugin-device-orientation": "^1.0.7",
        "cordova-plugin-printer": "^0.7.3",
        "cordova-plugin-whitelist": "^1.3.3"
    ,
    "cordova": 
        "plugins": 
            "cordova-plugin-whitelist": ,
            "cordova-plugin-device-orientation": ,
            "cordova-plugin-printer": 
        ,
        "platforms": [
            "browser",
            "android"
        ]
    

更新2

MyJS.js

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;

    $scope.print = function (divName) 
        console.log('2222222222222222222');
        //Enter the page location.
        var page = document.getElementById(divName).innerHTML;
        cordova.plugins.printer.print(page, 'Document.html', function () 
            alert('printing finished or canceled')
        );
    

    $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;
        
    
    var recipe = null;
    var categorylist = [];

    $scope.GetRecipe = function (paginate) 

        if (paginate == "next") 
            if ($rootScope.RecipeIndex < categorylist.length - 1) 
                $rootScope.RecipeIndex = $rootScope.RecipeIndex + 1;
                $scope.IsNext = true;
                $scope.IsPrevious = true;
                if ($rootScope.RecipeIndex == categorylist.length - 1)  $scope.IsNext = false; 
            
        
        else if (paginate == "previous") 
            if ($rootScope.RecipeIndex < $rootScope.RecipeList.length) 
                $rootScope.RecipeIndex = $rootScope.RecipeIndex - 1;
                $scope.IsNext = true;
                $scope.IsPrevious = true;
            
        
        if ($rootScope.RecipeIndex == -1) 
            $rootScope.RecipeIndex = 0;
        
        if ($rootScope.RecipeIndex == 0 || $rootScope.RecipeIndex == -1)  $scope.IsPrevious = false; 
        recipe = categorylist[$rootScope.RecipeIndex];
        $scope.Ingredient = recipe.recipeIngredients.split('\n');
        $scope.Method = recipe.recipeMethod.split('\n');
        $scope.Image = recipe.imageName;
        $scope.Name = recipe.recipeTitle;
        $scope.Description = recipe.recipeDescription;
        $scope.Prep = recipe.preparationTime;
        $scope.Cook = recipe.cookingTime;
        $scope.Serves = recipe.servings;
        $scope.QrCode = recipe.QrCode;
        $rootScope.IsBack = false;
        $rootScope.IsTitle = false;
    

    $scope.share = function () 
        var modalInstance = $uibModal.open(
            animation: true,
            ariaLabelledBy: 'modal-title',
            ariaDescribedBy: 'modal-body',
            templateUrl: 'QrCode.html',
            controller: 'ReciepieController',
            controllerAs: '$ctrl',
            size: 'sm',
            backdrop: 'static', /*  this prevent user interaction with the background  */
            keyboard: false
        );
    

    function NextRecipe() 
        alert();
    

]);

【参考方案1】：

它适用于我的 javascript

var dowloadurl  = "/.../sample.pdf" // Here your file location
window.cordova.plugins.FileOpener.openFile(
   dowloadurl,
   onSuccessFileOpen,
   onErrorFileOpen
);
    
var onSuccessFileOpen = function (data) 
    alert('onSuccessFileOpen');
;

function onErrorFileOpen(err) 
    alert('message: ' + err);

【参考方案2】：

我也有同样的问题。 尝试使用cordova-plugin-printer 插件来实现。它会解决你的问题。从您的代码看来，您希望通过id 打印div。以下是上述插件的各种用法：

打印整个 HTML 页面：

var page = location.href;

cordova.plugins.printer.print(page, 'Document.html');

从页面的一部分打印内容：

var page = document.getElementById('legal-notice');

cordova.plugins.printer.print(page, 'Document.html');

打印一些自定义内容：

var page = '<h1>Hello Document</h1>';

cordova.plugins.printer.print(page, 'Document.html');

有关更多选项，请查看文档：https://github.com/katzer/cordova-plugin-printer#usage

【讨论】：

@viveknuna 这是什么？检查你的礼貌等。这是一个非常模糊的错误。

@viveknuna 我不确定你是如何以及在哪里运行这段代码的？我尝试使用非常简单的代码并按预期工作。以下是我的应用程序的步骤， 1. 从此处 cordova.apache.org/docs/en/latest/guide/cli/index.html 创建 HelloWorld 应用程序 2. 根据此处 github.com/katzer/cordova-plugin-printer#installation 的文档安装 cordova-plugin-printer 3. 添加 打印整个 HTML 页面: onDeviceReady 函数中的示例代码，因为我没有单独的 js 文件，仅此而已。这是工作。问题在于您的 MyJs.js 文件。

我可以猜到，你还没有在angular.module 中添加cordova 作为依赖项。但是这个插件工作得很好。

为了您的信息，我在这里创建了工作演示和代码的视频：drive.google.com/open?id=115bW2_brZriIHKBr54aVq2AnyfDhiPAS

@viveknuna 你检查我的 cmets 了吗？现在可以用了吗？