Already used this code, cannot open the blob url in chrome ios, the result is just: about:blank.
var reader = new FileReader();
var out = new Blob([this.response], {type: 'application/pdf'});
reader.onload = function(e){
window.location.href = reader.result;
};
reader.readAsDataURL(out);
Also already tried using FileSaver.js, still cannot open it.
Any idea for this case/issue?
I am occurring the same problem in a nearly close-phase project.
Very depressing that it blocks my project schedule..
However, i found that the Chrome IOS v71 is affecting the FileSaver and MIME type but still no idea how to solve it. I am going to explore the compatibility of FileReader
Related
just a simple example, I tried using window.open
var save = 'test'
var blob = new Blob([save], {
type: "application/pdf;charset=utf-8"
});
var fileURL = URL.createObjectURL(blob);
window.open(fileURL);
I also tried using FileSaver.js
var save = 'test'
var blob = new Blob([save], {
type: "application/pdf;charset=utf-8"
});
saveAs(blob, filename);
Assume the blob contains valid pdf content. It seems to work in all other browsers (including OSX safari) by downloading a pdf file.
However in both cases, it seems to open a new tab that looks like this
I want to be able to do something like this where the pdf would open in a new page
I'm xhr-POSTing some data to a server, who returns a PDF, which I handle as a blob (using iron-ajax's handle-as="blob" attribute, for the sake of completeness).
Now I want to display this blob/PDF in a new browser window (Chrome/Windows only).
I have already tried URL.createObjectURL(blob) and (new FileReader()).readAsDataURL(blob) -- both fail silently:
Method 1)
function handlePdfResponse(blob) {
const pdfUrl = URL.createObjectURL(blob);
window.open(pdfUrl, '_blank');
}
Method 2)
function handlePdfResponse(blob) {
const reader = new FileReader();
reader.onloadend = function(e) {
window.open(reader.result, '_blank');
};
reader.readAsDataURL(blob);
}
In both cases, logging the input blob yields:
Blob {size: 219478, type: "application/pdf"}
Using the latter method, I can log the reader.result (which is a valid data-uri), paste it into a new Chrome window and gaze upon my shiny PDF.
There doesn't seem to be a way to debug either of these methods.
Thoughts?
Obvious errors?
Anything else I can try?
EDIT: Dear future generations: I'm on Chrome version 55.0
Turns out Chrome hates pop-ups. Unblock them for the win.
I am trying to download and show the contents of a remote file inside an iFrame , and succeeded in all browsers except for IE(i am trying with IE 10).
I have used XMLHttpRequest,Blob,CreateOBjectUrl APIs to complete the process.
In IE i am not able to view the file content inside the iFrame and also no particular error messages appeared on console as well.
I had pasted my code at the bottom of this thread , and a step by step explanation as below
Getting the download document url & corresponding mime
type(Perfectly fine in all broswers).
Invoking XMLHttp Request , a
Http GET Async call ,as response type as 'arraybuffer' (Perfectly
fine in all browsers) Upon completing the XMLHttpGet below 3 steps are
executing.
Creating a blob using the proper mimetype ;(Perfectly fine in all other browsers, specially verified the blob by downloading it in IE using MSSaveOrOpenBlob method).
4.InOrder to bind the blob contents to the iFrame , create the blob url using "createObjectURL" (Perfectly fine in all browsers , but in IE we are not getting a perfect URL).
Finally binding the URL with the iFrame for display.
Code snippet below.
// Getting the document url and mime type ( Which is perfectly fine )
var downloadUrl=finalServerURL + "DocumentService.svc/GetItemBinary?id=" + itemId + "&version=" + version;
var mimeTypeForDownload = responseStore.mimeTypes[currentlySelectedObject.fileExtension];
window.URL = window.URL || window.webkitURL;
//Defining the XML Http Process
var xhr = new XMLHttpRequest();
xhr.open('GET', downloadUrl, true);
xhr.responseType = 'arraybuffer'; //Reading as array buffer .
xhr.onload = function (e) {
var mimeType = mimeTypeForDownload;
var blob = new Blob([xhr.response], { type: mimeType });
// Perfect blob, we are able to download it in both IE and non-IE browsers
//This below url from createObjectURL,
//Working perfectly fine in all non-IE browsers, but nothing happening in IE
var url = window.URL.createObjectURL(blob);
document.getElementById(documentContentiFrameId).setAttribute("src", url);
};
xhr.send;
Please let me if you get any information on this , would be really helpful.
I came to know that its not possible in IE to get a proper URL for your blob entries , none of my attempts are get succeeded.
My alternative solutions,
1)go for pdf.js , an open source javascript library , which allows to render pdf binaries and equivalent pdf blobs.
2)Write your own viewers by utilizing the open PDF libraries , which will be time consuming , and more learning efforts involved.
Thanks,
Vishnu
I am developing a JavaScript little webmail.
I receive from the server a Base64-encoded string, that represents a file (it could be whatever type). I decode the string, a map it to a Uint8Array, and with it, I generate a Blob object with I create a data URI with
FileReader.readAsDataURL(blob)
Until here is pretty straightforward, but I am having problem with the download part.
I put the DataURI in
window.open(dataURI)
But chrome opens a new window and display my image, or my text. But I need to avoid this behaviour, and download the file instead.
I have red that this could be done with Content-Disposition "attachment" but I am not sure if it is my case, because I am generating the file from a string from the server.
Anyone who can help me understand?
Did you try to use "saveAs" ?
saveAs(blob, "hello.zip");
In the case you need wide browser support you could try polifill. More information
I am pretty sure you can set the type of the blob
var blob = new Blob(["Hello world!"], { type: "application/download" });
Edit:
without FileSaver.js:
var blob = new Blob(["Hi stack"], {type: 'application/download'});
var reader = new FileReader();
reader.onloadend = function(e) {
window.open(reader.result);
}
reader.readAsDataURL(blob);
Edit:
Documentation and browser support information ("Browser compatibility" tab):
FileReader
Blob
I've been working on a page that aa user will be able to load some local files and basically stream them to the browser, I'm having problems with the below code in IE10, it runs through fine in IE10, firefox and chrome.
If I put it though an interval IE10 won't read it after the source file changes :(
however firefox and chrome can, anyone know of a workaround (besides don't use IE10)?
setInterval(updateLog, 5000);
function updateLog(){
for (j=0;j<LogList.length;j++){
var reader = new FileReader();
reader.onload = function(e){
document.getElementById("LogList").innerHTML += e.target.result;
}
reader.readAsText(LogList[j].file);
}}
Thankyou for any help
Try this code:
setInterval(updateLog, 5000);
function updateLog(){
for (j=0;j<LogList.length;j++){
var reader = new FileReader();
reader.onload = function(e){
document.getElementById("LogList").innerHTML += "<pre>"+e.target.result+"</pre>";
}
reader.readAsText(LogList[j].file);
}}
and follow the link:
http://msdn.microsoft.com/library/ie/ms533897.aspx