代码之家  ›  专栏  ›  技术社区  ›  Vivek Nuna Chetan sabhaya

如何使用Cordova在Android上打印?

  •  2
  • Vivek Nuna Chetan sabhaya  · 技术社区  · 6 年前

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

    安古拉吉斯:

    $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" alt="Card image cap">
    
    
    <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:未在childscope.scope.print中定义cordova。

    (myjs.js:37)在fn(eval at compile(angular.js:15500)处,

    :4:149)在ChildScope的callback(angular.js:27285)上。$eval

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

    HTML图像元素。(角度:JS:27290)AT

    htmlImageElement.Dispatch(jquery.min.js:3)位于

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

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

    我的JS.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 回复  |  直到 6 年前
        1
  •  1
  •   Vikasdeep Singh    6 年前

    我也有同样的问题。 试着用 cordova-plugin-printer 插件。它会解决你的问题。从您的代码看,您希望打印 div 通过 id . 以下是上述插件的各种用法:

    打印整个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