Just started to teach myself javascript and jQuery mobile to create cross platform apps. I want to be able to click on links in my app to download a PDF file from a document that is synchronized (overwrites) with the local (on the phone) version of the file.
From this, I found out I should use data-ajax="false", so here is my first attempt:
Download
Unfortunately, nothing happens when I click the link after I have built and transferred it to my phone. It works fine in web browser, but not in Phonegap app. Any ideas what could be wrong? And how can I do this in a better way, to achieve exactly what I intend to make it do? If the file is already downloaded, I want the link to say "Open" instead, and have a link to the local version of the file.
Android doesn't have a native PDF viewer in its browser, so it doesn't really know what to do with that PDF link, which means you'll need to download it yourself. One solution would be to use Cordova's File and File Transfer plugins. Here's a complete working example from scratch that downloads a PDF that I've parked on a server and allows the user to open it in a reader app, you can test this as follows. Open a command prompt in the directory where you keep your source code and:
Create a Cordova project and move into the project directory. At the command prompt, type:
cordova create hello com.example.hello HelloWorld
cd hello
In the www directory inside the project directory, replace the entire contents of the www/index.html file with:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<script src="cordova.js"></script>
Download PDF
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert("Got deviceready");
}
function downloadPdf() {
var fileTransfer = new FileTransfer();
var inputUri = encodeURI("http://nextwavesoftware.com/downloads/helloworld.pdf");
var outputPath = cordova.file.externalDataDirectory + "helloworld.pdf";
// var outputPath = "/storage/emulated/0/Download/helloworld.pdf";
alert("Starting download to " + outputPath);
fileTransfer.download(
inputUri,
outputPath,
function (entry) {
alert("Download complete: " + entry.fullPath + ", URL=" + entry.toURL());
cordova.plugins.fileOpener2.open(
entry.toURL(), // You can also use a Cordova-style file uri: cdvfile://localhost/persistent/Download/starwars.pdf
'application/pdf',
{
error: function (e) {
alert('fileOpener2 error status: ' + e.status + ' - Error message: ' + e.message);
},
success: function () {
alert('fileOpener2 file opened successfully');
}
}
);
},
function (error) {
alert("download error: source=" + error.source + ", target=" + error.target + ", error code=" + error.code);
});
}
</script>
</body>
</html>
In the project directory, at the command prompt, type cordova plugin add org.apache.cordova.file-transfer to add the File Transfer plugin.
In the project directory, at the command prompt, type cordova plugin add org.apache.cordova.file to add the File plugin.
In the project directory, at the command prompt, type cordova plugin add https://github.com/pwlin/cordova-plugin-file-opener2 to add the File Opener plugin.
In the project directory, at the command prompt, type cordova run android to build and deploy the app to the emulator or your device.
In the emulator or on the device, wait until you see the Got deviceready alert and dismiss it; the plugins are now available for use.
In the emulator or on the device, click the Download PDF button.
You should see a "Download complete" dialog. Dismiss the dialog, and you should get another asking you to select the app to use to open the PDF file.
Related
I am using Cordova version 7.0.1,I want to use webintent and when i am trying to install like this
cordova plugin add https://github.com/Initsogar/cordova-webintent.git
i am getting this error
I am trying to recieve the url from the other apps to my cordova app and the code i am following is this one.
window.plugins.webintent.getExtra(window.plugins.webintent.EXTRA_TEXT, function (url) {
alert(url);
console.log("coming");
}, function() { //Fail
alert ("error");
});
when i am executing i am getting this error
Error: exec proxy not found for :: WebIntent :: getExtra
PS: I know that URL is not working,Is there any other way to install Web Intent
That repository is no longer available.
I could successfully get the plugin from https://github.com/cordova-misc/cordova-webintent
I am using Cordova to create applications in iOS (version 10.3). I want to open an office file by using the command
window.open("data:application/msword;base64," + fileContent, "_blank", "location=no");
I use the MIME that can be found here
http://filext.com/faq/office_mime_types.php.
I have installed plugins InAppBrowser, ADALProxy, Cordova-plugin-MS-Files.
My problem is that when the document opens, it is blank, completely empty. I can view other type of files (pdf, images etc) but not Office files (docx, xls, ppt).
Any idea? Am I missing any plugin?
I believe the issue is caused by inAppBrowser not being able to view MS files.
My suggestion is to use the fileOpener2 plugin to open the file with whichever document viewer the user has that is capable of opening MS files.
http://ngcordova.com/docs/plugins/fileOpener2/135
Then you can use something like this:
cordova.plugins.fileOpener2.open(
'YOUR_FILE_URI', // File location or URI
'application/docx', //MIME type
{
error : function(e) {
console.log('Error status: ' + e.status + ' - Error message: ' + e.message);
},
success : function () {
console.log('file opened successfully');
}
}
);
This will cause the device to use an application that can handle MS files.
I know it's old question, however I wrote a Cordova plugin to preview office document and most of major file type,
it works on IOS and Android
you can use it from here
https://github.com/mostafa-mansour1/previewAnyFile
to install in your cordova or ionic project
$ cordova plugin add cordova-plugin-preview-any-file --save
then use it in your code like this
PreviewAnyFile.preview("file://filepath/filename.ext");
if the source is base64 string then you need to save it in the device with cordova file plugin (Write to a file) section
I am working on a hybrid mobile app using Ionic Framework and AngularJS. I am using Ionic Creator & Ionic Lab. In my app, I have several buttons that link to external resources (webpages, mailto: links, pdf files etc). The links work fine when I test them within the browser (Ionic Lab). However, when I test the app in an Android virtual device or an actual device, none of the links are working.
I found a question where someone had a similar issue:
/questions/33627061/ionic-simple-href-not-working-on-android-device
I tried Implementing all the proposed solutions from adding to config.xml:
<allow-navigation href="*" />
Installing cordova inappbrowser plugin via:
$sudo cordova plugin add cordova-plugin-inappbrowser
I tried using ng-click="some_function()" instead of href, then defining the function in my controller.
The OP on that question finally resolved his issue by commenting out/uncommenting from index.html:
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
Looking at my browser console logs there was a 404 not found for cordova.js, so I manually added it to www/ from the platform_www/ directory for android, as well as cordova_plugins.js
However after trying all this, the links are still not working. In my consol logs I now get an error saying:
GET http://localhost:8100/plugins/cordova-plugin-inappbrowser/www/inappbrowser.js 404 (Not Found)
Uncaught Error: Module cordova-plugin-inappbrowser.inappbrowser does not exist. http://localhost:8100/cordova.js Line: 1421
But the thing is inappbrowser.js is in that folder!
Please help! I'm at wits end and have no idea what to do next. I have uploaded the sample code I'm working with on github:
https://github.com/chmod-777/link-test
Software versions:
Linux mint 17.1
node v0.12.2
npm 2.7.4
cordova 6.2.0
ionic 1.7.14
For starters, try changing the way you're calling the open method in your controller code to this:
.controller('pageCtrl', function($scope, $window, $cordovaInAppBrowser) {
$scope.open_google = function() {
$cordovaInAppBrowser.open('https://www.yahoo.com/', '_system', 'clearcache=yes');
// I also tried this
//$window.open('https://www.msn.com/', '_system', 'location=yes');
// and this
//window.open('https://www.netflix.com/', '_system', 'location=yes');
}
})
I have used the inappBrowser plugin with Jquery mobile.It worked fine.
ref=null;
var url= accRestService.someURL;
if( device.platform === "Android"){
ref =cordova.InAppBrowser.open(url, "_blank",'location=no,clearcache=yes,hardwareback=no,zoom=no');
}else{
ref =cordova.InAppBrowser.open(url, "_blank",'location=no,clearcache=yes,closebuttoncaption=Go back to App,toolbar=yes,presentationstyle=formsheet');
}
ref.addEventListener('loadstart',onBrowserLoadStart);
ref.addEventListener('loadstop',onBrowserLoadStop);
ref.addEventListener('loaderror', onBrowserError);
ref.addEventListener('exit', onBrowserClose);
First, make sure that you have installed the cordova plugin "inappbrowser"
cordova plugin add cordova-plugin-inappbrowser
(see https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/index.html)
Then, you can use for example :
try {
var uri = "http://some-example.com";
cordova.InAppBrowser.open(uri, '_system');
} catch(e) {
window.open(uri, '_blank');
}
the catch block will be used as a fallback when testing the app in a browser.
This question has been asked before on this forum but I could not find a satisfactory solution to the problem. Hence the question again.
I am trying to download and store a file from the internet into the local file system on my phone. I am getting the following error:
Uncaught ReferenceError: LocalFileSystem is not defined
The code I have so far is:
function storeFile(bucketName, csvfile){
var region;
s3Client.getBucketLocation(params = {Bucket: bucketName},function(err,data){
if(err) console.log("Error :: Cannot retrieve bucket location", err);
else {
console.log(data);
region = data;
}
});
var url = "http://s3-"+region+".amazonaws.com/"+bucketName+"/"+csvfile;
window.requestFileSystem(LocalFileSystem.PERSISTENT,0,
function(fs){
filePath = fs.root.fullPath + "/" + csvfile;
fileTransfer = new FileTransfer();
fileTransfer.download(url, filePath,
function (entry) {
console.log(entry.fullPath); // entry is fileEntry object
},
function (error) {
console.log("Some error");
});
}, function(err){
console.log("Request File System failure");
});
}
Do I need to add any plugins into my app? I already have the File and FileTransfer plugins added. By the way this function is called after onDeviceReady is fired.
EDITED:
I am not working with AngularJs. My code is on NodeJs. Secondly, I have no dependencies like the ionic framework etc. which could possibly present a problem. This same code has been tested on other data which have been successfully downloaded and stored. The problem has occurred after I changed the code to download from a specific location on the amazon server. If someone could address this problem for me, it would be great. I am able to access the bucket and the region through code. The only problem is the LocalFileSystem.
Was able to solve the problem. Just removed and re-added the file and file-transfer plugins.
cordova plugin rm org.apache.cordova.file and cordova plugin rm org.apache.cordova.file-transfer to remove.
cordova plugin add org.apache.cordova.file and cordova plugin add org.apache.cordova.file-transfer to add.
It may tell you that these plugins are soon to be deprecated or something like that. You also have the option of using the later versions. To add you can use
cordova plugin add cordova-plugin-file and cordova plugin add cordova-plugin-file-transfer. Just check if they are available under the respective builds in the platforms folder.
I use Weinre to get a console from my phone. But on Javascript errors with plugins (contacts, geolocalisation etc...) I get nothing....
I don't know how to push on the console every javascript errors.
How to easily debug your javascript which use a plugin present only on your device ?
Thank you.
You can use the Console Plugin to debug your code in iOS, android, windows phone, etc.
Install the plugin using: $ cordova plugin add org.apache.cordova.console
Then its as simple as using console.log(...); in your javascript files.
If you want to log your geolocation you can do:
var onSuccess = function(position) {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
};
var onError = function(err) {
console.log(error.code);
console.log(error.message);
};
navigator.geolocation.getCurrentPosition(onSuccess, onError);
Then, when you build your app, and emulate, look for this log file in your project:
.../platforms/ios/cordova/console.log