I need to print a webview both in iOs and Android.
In Android everything works fine while in iOs, print dialog is opern but no content is displayed.
Debugging plugin native code, I found multiple calls to these lines in APPPrinter.m
dispatch_sync(dispatch_get_main_queue(), ^{
item = [[UIMarkupTextPrintFormatter alloc]
initWithMarkupText:content];
});
While the first time, content contains webview html, the latter is set to nil, is it normal?
Here's the snippet used to invoke plugin.
this.http.get('../../assets/css/print.css', { responseType: 'text' }).subscribe(
cssFile => {
let PDF_HTML = `<style>${cssFile}</style> ${content}`;
let html = '<html>';
html += '<head>';
html += '<style>';
html += cssFile;
html += '</style>';
html += '</head>';
html += '<body>';
html += content;
html += '</body>';
html += '</html>';
this.printer.print(html, options)
.then(res => {
console.log(res);
},
err => {
console.error(err);
});
},
err => {
console.error(err);
});
here's my ionic info output:
cli packages: (C:\Users\xxxxxxxxx\AppData\Roaming\nvm\v10.16.0\node_modules)
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : not installed
Gulp CLI : [10:40:17] CLI version 3.9.1 [10:40:17] Local version 3.9.1
local packages:
#ionic/app-scripts : 3.2.4
Cordova Platforms : android 7.1.4
Ionic Framework : ionic-angular 3.9.8
System:
Android SDK Tools : 26.1.1
Node : v10.16.0
npm : 6.9.0
OS : Windows 10
Environment Variables:
ANDROID_HOME : C:\Users\xxxxxxxxx\AppData\Local\Android\Sdk
Misc:
backend : pro
Package json :
"#ionic-native/printer": "4.20.0"
"cordova-plugin-printer": "0.8.0",
Thanks for your support!
ps.
I already opened a corresponing issue here
For those who may encounter an analog issue:
it seems like the problem lied in css rules in the form of:
page-break-<xxx>
Replacing page-break with break-<xxx> solved the issue.
As in MDN WebDocs page-break is now deprecated.
Weirdly enough, break- syntax is not recognized by Android, but that's outside this question's scope.
Related
I have an app that checks for location services for a store locator page - uses geolocation to get the nearest store to the user. Has worked fine up until a recent app update and then something broke. I've tried updating plugins, cordova, ionic, etc and just can't find the issue. Basically, the native Diagnostic plugin just doesn't fire, but I also don't get any thrown errors. Below is the function we've used to check for location services:
checkIfLocationPerms(){
let alert = this.alertCtrl.create({
title: 'Error Loading Locations',
subTitle:`You must allow geolocation permissions for this application before continuing. Please Change them in the settings of your device`,
buttons: ['OK']
});
let timeoutFunct = setTimeout(()=>{
this.goHome();
alert.present();
}, 5000);
this.Diagnostic.isLocationAvailable().then(status=>{
if(status == true){
clearTimeout(timeoutFunct);
this.loadMap();
} else {
timeoutFunct;
this.Diagnostic.requestLocationAuthorization().then(data=>{
if(data == this.Diagnostic.permissionStatus.GRANTED_WHEN_IN_USE ||
data == this.Diagnostic.permissionStatus.GRANTED) {
clearTimeout(timeoutFunct);
this.loadMap()
} else {
clearTimeout(timeoutFunct);
this.goHome();
alert.present();
return false;
}
}).catch(err=>{
clearTimeout(timeoutFunct);
this.goHome();
alert.present();
})
}
}).catch(err=>{
clearTimeout(timeoutFunct);
this.goHome();
alert.present();
})
}
Basically the clearTimeout function finishes before I get anything back from Diagnostic. If I don't call the clearTimeout function, I get nothing returned and no errors. Below is my Ionic Info:
Ionic:
Ionic CLI : 6.11.8 (/usr/local/lib/node_modules/#ionic/cli)
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.2.4
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-webview 4.2.1, (and 18 other plugins)
Utility:
cordova-res : 0.15.1
native-run : 1.0.0
System:
ios-deploy : 1.10.0
ios-sim : 6.1.3
NodeJS : v13.13.0 (/usr/local/Cellar/node/13.13.0_1/bin/node)
npm : 6.14.7
OS : macOS Catalina
Xcode : Xcode 11.7 Build version 11E801a
here's the versions of the pertinent plugins from package.json
"#ionic-native/diagnostic": "^5.28.0",
"#ionic-native/geolocation": "^4.18.0",
I can add that I don't get a response even if Locations Services is allowed. I don't see a way to allow the app to have access to Location Services either. I just don't know where to go from here, I've been fighting this for a week trying to figure it out. Anyone have any suggestions?
The only was I was able to get the correct permissions pop up was to update the Diagnostic plugin. I created a test application with all latest versions of Ionic, Diagnostic etc, and that worked properly.
i'm developping an Ionic3 App and wants to allow user to upload files from their devices. I’ve got an issue with cordova/phonegap file picker plugin.
I followed the instructions here :
https://github.com/jcesarmobile/FilePicker-Phonegap-iOS-Plugin
But even using the simplest code which is given in Ionic documentation doesn't work :
import { IOSFilePicker } from '#ionic-native/file-picker/ngx';
constructor(private filePicker: IOSFilePicker) { }
this.filePicker.pickFile()
.then(uri => console.log(uri))
.catch(err => console.log('Error', err));
I keep on getting this error :
ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
at IOSFilePicker.pickFile (index.js:27)
The plugin has been correctly installed in app.module.ts with the correct ngx path.
Here some additional info about versions :
ionic framework : 3.9.2
Ionic App Scripts: 3.1.8
Angular Core: 6.0.3
Angular Compiler CLI: 6.0.3
Node: 8.11.3
#ionic-native/file-picker: 5.4.0
rxjs: 6.3.3
typescript: 2.7.2
any idea ?
Thx
Install plugin :
ionic cordova plugin add cordova-plugin-filepicker
npm install --save #ionic-native/file-picker#4
Add in in your app module
import { IOSFilePicker } from '#ionic-native/file-picker';
#NgModule({
..
providers:[
IOSFilePicker
]
})
Now use in your page component
import { IOSFilePicker } from '#ionic-native/file-picker';
class ...
constructor(private filePicker: IOSFilePicker) { }
getFile(){
this.filePicker.pickFile()
.then(uri => console.log(uri))
.catch(err => console.log('Error', err));
}
Ref. https://ionicframework.com/docs/v3/native/ios-file-picker/
I have an Ionic 3 app for Android and iOS.
The app uses an API to get data from the server.
This works for Android, but for iOS I don't get the view updated with the response of the server.
.ts file
ionViewWillEnter() {
this.rest.get(this.url).subscribe(res => {
this.profile = res['profile'];
this.statistics = res['statistics'];
});
}
provider
return this.http.get(`${this.API_URL}/${resource}`, {'params': param})
.map(response => response);
.html
<ion-row class="stats" padding-horizontal="">
<ion-col col-6>Friends</ion-col>
<ion-col col-6 text-right>{{statistics?.friends}}</ion-col>
</ion-row>
<ion-row class="stats" padding-horizontal="">
<ion-col col-6>Achievements</ion-col>
<ion-col col-6 text-right>{{statistics?.achievements}}</ion-col>
</ion-row>
in Android the stats are nicely updated, but on iOS it stays blank except the fixed text, that is shown.
But when we go to a subpage and then use the back button or open and close the menu, we get the data visible (see attached screenshot).
Ionic info
Ionic:
ionic (Ionic CLI) : 4.12.0 (C:\Users\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.4
#ionic/app-scripts : 3.2.3
Cordova:
cordova (Cordova CLI) : 9.0.0
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-webview 1.2.1, (and 11 other plugins)
System:
Android SDK Tools : 26.1.1 (C:\Android\android-sdk)
NodeJS : v10.15.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10
We are developing an ionic native mobile application. we need network type (wifi,2g,3g,4g).We are getting in android but unable to get in iOS.We tried those commands for network plugins
$ ionic cordova plugin add cordova-plugin-network-information
$ npm install --save #ionic-native/network
Code
this.platform.ready().then(() => {
setTimeout(() => {
var networkState = this.network.type;
alert("networktype"+JSON.stringify(this.network));
console.log("networktype"+JSON.stringify(this.network));
}, 30000);
});
Always we are getting null in iOS. guide to us what we miss
iOS version :10.3.3
ionic info :
I'm trying to Speech Recognition plugin with ionic3 and I'm keep getting this error
Ionic Native: deviceready did not fire within 5000ms. This can happen when plugins are in an inconsistent state. Try removing plugins from plugins/ and reinstalling them.
I'm running this in my devise (iPhone iOS 10.1), with command ionic cordova run ios -l
I've gone through some SO questions / ionic forum questions and tried reinstalling all the plugins, reinstalling platform (ios) + plugins as they suggested but still no luck.
Following is my class
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { SpeechRecognition } from '#ionic-native/speech-recognition';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
speechList: Array<string> = [];
constructor(private speach: SpeechRecognition, public navCtrl: NavController) {
}
async getPermission():Promise<void> {
console.log('abc1');
try{
const permission = await this.speach.requestPermission();
console.log(permission);
return permission;
} catch (e){
console.log(e);
}
}
listenForSpeech():void {
this.speach.startListening().subscribe(data => this.speechList = data,
error => console.log(error)
)
}
}
and following is my ionic info
global packages:
#ionic/cli-utils : 1.2.0
Cordova CLI : 7.0.0
Ionic CLI : 3.2.0
local packages:
#ionic/app-scripts : 1.3.7
#ionic/cli-plugin-cordova : 1.2.1
#ionic/cli-plugin-ionic-angular : 1.2.0
Cordova Platforms : ios 4.4.0
Ionic Framework : ionic-angular 3.3.0
System:
Node : v7.10.0
OS : OS X El Capitan
Xcode : Xcode 7.3.1 Build version 7D1014
ios-deploy : 1.9.1
ios-sim : 5.0.8