Question

我想在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" 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）at fn（eval at compile（angular.js：15500），

：4：149）在ChildScope的回调（angular.js：27285）。$ eval
     ChildScope的
（angular.js：18372）。$ apply（angular.js：18472）

HTMLImageElement。（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"
        ]
    }
}

UPDATE2

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();
    }

}]);

Answer 1

我也有同样的问题。尝试使用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');

有关更多选项，请查看文档：{{3}}

Answer 2

它在 JavaScript 中对我有用

    with start_end_table as (
        select TIMESTAMP("2007-12-31 12:00:00+00") as startTime, TIMESTAMP("2007-12-31 12:05:00+00") as endTime 
        union all 
        select TIMESTAMP("2007-12-31 12:03:00+00") as startTime, TIMESTAMP("2007-12-31 12:17:00+00") as endTime
        union all
        select TIMESTAMP("2007-12-31 12:07:00+00") as startTime, TIMESTAMP("2007-12-31 12:15:00+00") as endTime
        union all
        select TIMESTAMP("2007-12-31 12:24:00+00") as startTime, TIMESTAMP("2007-12-31 12:31:00+00") as endTime
        union all
        select TIMESTAMP("2007-12-31 12:29:00+00") as startTime, TIMESTAMP("2007-12-31 12:36:00+00") as endTime
        union all
        select TIMESTAMP("2007-12-31 12:41:00+00") as startTime, TIMESTAMP("2007-12-31 12:46:00+00") as endTime
    )
    
    select
        *,
        timestamp_diff(endTime, startTime, minute) as diffTime
    from start_end_table

如何使用Cordova在Android上进行imlement打印？

2 个答案: