如何使用Cordova在Android上实现打印？ [英] How to imlement print on Android using Cordova?
问题描述
我想在Android应用中实现打印功能，我正在使用AngularJS。我尝试了以下代码，但仅在浏览器上有效，而在Android上无效。
I want to implement print functionality in Android app, I'm using AngularJS. I have tried the below code, but it works only on browser, it doesn't work on 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提供，但是会出现以下错误。
I have tried the solution provided by @VicJordan, But it gives the below error.
ReferenceError：在ChildScope。$ scope.print
ReferenceError: cordova is not defined at ChildScope.$scope.print
（MyJs.js：37）在fn（在编译时评估（angular.js：15500），
(MyJs.js:37) at fn (eval at compile (angular.js:15500),
：4：149）在回调（angular.js：27285）在ChildScope。$ eval
:4:149) at callback (angular.js:27285) at ChildScope.$eval
（angular.js：18372）在ChildScope。$ apply（angular.js：18472）在
(angular.js:18372) at ChildScope.$apply (angular.js:18472) at
HTMLImageElement。 （angular.js：27290）在
HTMLImageElement. (angular.js:27290) at
HTMLImageElement.dispatch（jquery.min.js：3）在
HTMLImageElement.dispatch (jquery.min.js:3) at
HTMLImageElement.r.handle（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();
}
}]);
推荐答案
我也遇到了同样的问题。
尝试使用 cordova-plugin-printer 插件进行操作。它将解决您的问题。从您的代码看来，您想通过 id 打印 div 。以下是上述插件的各种用法：
I also had the same issue.
Try to do it using cordova-plugin-printer plugin. It will solve your problem. From your code it looks you want to print div by id. Below are various usage of above plugin:
打印整个HTML页面：
Print the whole HTML page:
var page = location.href;
cordova.plugins.printer.print(page, 'Document.html');
从页面的一部分打印内容：
Print the content from one part of the page:
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
For more options, check out the documentation : https://github.com/katzer/cordova-plugin-printer#usage
这篇关于如何使用Cordova在Android上实现打印？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
