admin管理员组文章数量:1418140
I know there's a lot of questions already existing on SO related to this kind of problem, for instance:
- Create a file in memory for user to download, not through server
- Using HTML5/Javascript to generate and save a file
- Data protocol URL size limitations
- Save file Javascript with file name
- Creating a Blob from a base64 string in JavaScript
- Failed to execute 'atob' on 'Window'
This question is very specific to Safari on iOS 8.1.3 (Mobile, iPad 2+). We have an offline AngularJS web app using Application Cache and IndexedDB to store data. One kind of data is PDF documents that can be relatively large: about 25 megabytes max. We are storing these files in IndexedDB and when the user wants to download it, we have this file in-memory within the browser with JavaScript.
The problem is really when the user wants to save it. Safari Mobile crashes maybe from a size limitation of Data URI or something else.
this.save = function (file) {
var mediaType = "application/pdf";
var link = document.createElement("a");
var blob = new Blob([this.fromBase64ToBinary(file.content)], { type: mediaType });
var blobUrl = URL.createObjectURL(blob);
document.body.appendChild(link);
link.download = file.name;
link.href = blobUrl;
link.click();
document.body.removeChild(link);
};
In a service, we have a function save(file) where file is an object containing two properties:
name: the filename;content: data of the file, which is base 64 encoded, then we transform it to binary.
The atob() function can be the cause? When I do a step-by-step debugging on the iPad running this code, it crashes right there (ie: line with var byteCharacters = atob(b64Data);).
this.fromBase64ToBinary = function (base64) {
var byteCharacters = atob(base64);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
return new Uint8Array(byteNumbers);
};
I know there's a lot of questions already existing on SO related to this kind of problem, for instance:
- Create a file in memory for user to download, not through server
- Using HTML5/Javascript to generate and save a file
- Data protocol URL size limitations
- Save file Javascript with file name
- Creating a Blob from a base64 string in JavaScript
- Failed to execute 'atob' on 'Window'
This question is very specific to Safari on iOS 8.1.3 (Mobile, iPad 2+). We have an offline AngularJS web app using Application Cache and IndexedDB to store data. One kind of data is PDF documents that can be relatively large: about 25 megabytes max. We are storing these files in IndexedDB and when the user wants to download it, we have this file in-memory within the browser with JavaScript.
The problem is really when the user wants to save it. Safari Mobile crashes maybe from a size limitation of Data URI or something else.
this.save = function (file) {
var mediaType = "application/pdf";
var link = document.createElement("a");
var blob = new Blob([this.fromBase64ToBinary(file.content)], { type: mediaType });
var blobUrl = URL.createObjectURL(blob);
document.body.appendChild(link);
link.download = file.name;
link.href = blobUrl;
link.click();
document.body.removeChild(link);
};
In a service, we have a function save(file) where file is an object containing two properties:
name: the filename;content: data of the file, which is base 64 encoded, then we transform it to binary.
The atob() function can be the cause? When I do a step-by-step debugging on the iPad running this code, it crashes right there (ie: line with var byteCharacters = atob(b64Data);).
this.fromBase64ToBinary = function (base64) {
var byteCharacters = atob(base64);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
return new Uint8Array(byteNumbers);
};
-
4
Have a look at this question and the answer. Because
atobin ios crashes when a space character exists. – ykaragol Commented May 20, 2016 at 8:20 - Why you need to use base64? I'm asking because when you use, the file bees 37% bigger. It will be approximately 37% larger: Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size Source: en.wikipedia/wiki/Base64 – Marco Commented Jun 22, 2018 at 17:54
- I have one question, does it break for all file sizes or specific file sizes? – VariableVasasMT Commented Apr 16, 2019 at 18:39
- as per ment by @ykaragol, would a base64 encoded string have a space in it? stackoverflow./questions/3092019/… – VariableVasasMT Commented Apr 16, 2019 at 18:40
- @Marco the answer to your question is in the ment by ykaragol – VariableVasasMT Commented Apr 16, 2019 at 18:52
1 Answer
Reset to default 1I dealt with a similar issue. The way I solved it was this:
// Detects if Safari 9 or less
var isSafariNineOrLess = navigator.vendor && navigator.vendor.indexOf('Apple')
> -1 &&
navigator.userAgent &&
navigator.userAgent.indexOf('CriOS') === -1 &&
navigator.userAgent.indexOf('FxiOS') === -1 &&
window.ApplePaySession === undefined;
...
if(!isSafariNineOrLess) {
save(file);
}
else {
var myLink = document.getElementById('myLink');
if(myLink) {
myLink.removeAttribute('href');
myLink.setAttribute('href', 'http://example./download.pdf.zip');
}
}
Then when people click on the link they can download a zipped file that contains the PDF. You look like you are using https://github./eligrey/FileSaver.js, or something similar, and that absolutely does not work with Safari 9 and below.
Take a look at https://visualstudio.microsoft./thank-you-downloading-visual-studio-mac/?sku=munitymac&rel=16# in Safari 9 or below for the behavior I'm talking about, where the a tag href is changed to a URL to download a file.
Let me know if this works for you!
本文标签： javascriptHow to download data clientside with mobile SafariStack Overflow
版权声明：本文标题：javascript - How to download data client-side with mobile Safari? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745279062a2651335.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论