download pdf from webservice (developing a webapplication) Any other alternative? - javascript

I'm developing a cross platform app using cordova. I use intel XDK as a simulator. I want to download a pdf file from webservice and open it once it gets downloaded.
I have used the following code
var xhr = new XMLHttpRequest();
xhr.open("GET", mapusaurl);
xhr.setRequestHeader('Authorization',auth);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
if (this.status === 200) {
var blob = new Blob([xhr.response], {type: "application/pdf"});
var objectUrl = URL.createObjectURL(blob);
var link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download="mapusa" + new Date() + ".pdf";
link.click();
window.open(link.download);
}
};
xhr.send();
As far as Chrome is concerned it downloads the pdf and then I can open it. For intel XDK when I open the respective page a dilaog pops up where I'm asked the location to save the file and at the same time I get the following error
Cannot GET /mapusaThu%20Jan%2018%202018%2012:05:40%20GMT+0530%20(India%20Standard%20Time).pdf
That's probably because it's trying to open the pdf before it has downloaded (it shows up even before I click the save button)
Is there a way to get around this? Thanks in advance

Related

Force download of file from external url not open in new tab/window

I am trying to download a file with JavaScript and not let it open in a new tab or window.
What I have so far is this:
var link = document.createElement("a");
link.download = filename;
link.href = fileurl;
link.click();
I've been doing a fair bit of research about this but cannot find anything that works because the file is coming from a Google Signed URL which I have no control over and cannot modify headers for.
This has to happen in client side JavaScript/jQuery.
Edit
It is actually dynamic so there can be X number of files, if I could get them all to download as a zip that would be even better.
for(var i=0; i<filenames.length; i++){
var formData = new FormData();
formData.append('filename', filenames[i]);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
fileurl = this.responseText;
var link = document.createElement("a");
link.download = filenames[i];
link.href = fileurl;
link.click();
}
}
xmlhttp.open("POST", "url_to_get_download_urls");
xmlhttp.send(formData);
}
Have you tried doing the download action in different browsers? In the latest versions of Chrome, you cannot download cross-origin files (they have to be hosted on the same domain).
As well if the file doesn't change, have you tried hosting the file yourself and initiating the download?
edit: If you're trying to bundle the items into a zip for download, that would necessitate doing the initial download on your own server and zipping there.

Open downloaded file in another application (web-app)

I am building a web application (PWA) using Javascript. I want the application to automatically open downloaded files, such as PDF, DOCX, etc., in an external standard application such as Adobe Reader and Word.
Is there a function in Javascript that solves my problem?
At the moment, the application simply downloads the file to the device.
Unfortunately, I do not have much experience with Javascript, so I apologize if this is a stupid question.
XHR.responseType = 'blob';
XHR.onload = function() {
var data = this.response;
var a = document.createElement('a');
a.href = window.URL.createObjectURL(data);
a.download = fileName;
a.dispatchEvent(new MouseEvent('click'));
};

Javascrip service worker blob

I am trying to download a file in a service worker. The file came from a blob.
I already know that i can download a blob by doing this
var urlCreator = window.URL || window.webkitURL;
var blobURL = urlCreator.createObjectURL(blob, { type: "octet/stream" });
or by using something like FileSaver.js
But today, i am trying to "render" the bytes array of the blob in the page and force the browser to download the document.
Why ?
I am trying to do that because, some browser that i am trying to reach do not support url like "blob:https:......"
So i try to find a way to render the bytearrays of my blob directly in javascript.
I know that i can push headers with worker, but not sure that is the right strategie.
I also try something like that
var xhr = new XMLHttpRequest();
xhr.open('GET', obj.URL, false);
xhr.overrideMimeType("application/octet-stream");
//xhr.setRequestHeader("Accept", "application/octet-stream");
xhr.responseType = "arraybuffer";
xhr.onload = function (e) {
self.Response(xhr.response);
//if (this.status == 200) {
// var myBlob = this.response;
// // myBlob is now the blob that the object URL pointed to.
//}
};
xhr.send();
In my worker.js
ps: Please avoid to told me, send you base64 blob content to your server and send back the file to the browser, i would like to find a pure javascript solution.
Is it possible ?

Using Simple Webaudiorecorder.js in R/Shiny and posting the recording to the server

I am using WebAudioRecorder.js for making online recordings in an R Shiny app, see:
https://github.com/addpipe/simple-web-audio-recorder-demo
As a format, I chose the wave format, and in the JavaScript code, the recording is obtained as a blob. I would like the program to save this blob on the server without any dialog.
Here, you shouldn't set the hole filePath in javascript, you should give it a filename and then php should put it in the correct folder.
function uploadWaveBlob (blob, encoding) {
var xhr = new XMLHttpRequest();
var formData = new FormData();
var fileName = Date().toISOString() + '.' + encoding;
formData.append("Wav", blob, fileName);
xhr.open('POST', uploadUrl);
xhr.onload = function () {
console.log('xhr complete');
};
xhr.send(formData);
}
imagine if i would upload something to like /etc/hosts or something
The following site gives code that shows how to upload a blob to the server:
https://gist.github.com/primaryobjects/d6cdf5d31242a629b0e4cda1bfc4bff9
The complete solution is available at:
https://github.com/heeringa0/simple-web-audio-recorder
and shows how to integrate the Simple WebAudioRecorder.js in an R Shiny app where the recording is saved to the server.

reading an object URL produced in a worker with IE

I have a webworker that is producing a CSV for downloading, and to conserve memory I only have it return the URL it produces from teh blob..
My worker code looks something like::
var blob = new Blob([ResultOfSomeWork()],{type:'text/csv'});
URL.createObjectURL(blob);
self.postMessage({url:blob.url});
My goal is to just be able to download it in firefox and chrome this is very easy as I can just set up an invisible <a> and have it be clicked to download it.
For IE10 I want to use msSaveBlob but I need a blob which I don't want to transfer.
How can I download a object dataurl in IE10?
So I found a solution that works. Apparently, I can XHR and read the content back in my main thread.
worker.onmessage = function(event){
var url = event.data.url;
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType='blob';
xhr.onload = function(){
msSaveBlob(xhr.response, fileName +'.csv');
};
xhr.send();
}
While this feels extremely complicated it works well in practice and is really fast.

Categories