데이터 URL 파일 다운로드
나는 누구나 브라우저에서 액세스 할 수있는 완전한 자바 스크립트 기반의 zip / unzip 유틸리티를 만드는 아이디어를 가지고 놀고 있습니다. zip을 브라우저로 직접 드래그하면 그 안에있는 모든 파일을 다운로드 할 수 있습니다. 개별 파일을 끌어서 새 zip 파일을 만들 수도 있습니다.
나는 그것을 서버 측에서하는 것이 더 낫다는 것을 알고있다. 그러나이 프로젝트는 단지 약간의 재미를위한 것이다.
사용 가능한 다양한 방법을 활용하면 파일을 브라우저로 드래그하는 것이 충분히 쉬울 것입니다. (gmail 스타일)
인코딩 / 디코딩은 괜찮을 것입니다. 나는 as3 zip 라이브러리를 봤기 때문에 괜찮을 것이라고 확신합니다.
내 문제는 마지막에 파일을 다운로드하는 것입니다 ..
window.location = 'data:jpg/image;base64,/9j/4AAQSkZJR....'
이것은 파이어 폭스에서는 잘 작동하지만 크롬에서는 작동하지 않습니다.
을 사용하여 크롬에서 찾은 이미지로 파일을 임베드 할 수 <img src="data:jpg/image;ba.." />
있지만 파일이 반드시 이미지 일 필요는 없습니다. 모든 형식이 될 수 있습니다.
누구든지 다른 해결책이나 어떤 종류의 해결 방법을 생각할 수 있습니까?
아이디어 :
<a href="data:...." target="_blank">
(테스트되지 않음) 시도데이터 URL 대신 downloadify 사용 (IE에서도 작동 함)
또한 파일에 제안 된 이름 (기본 '다운로드'대신)을 지정하려는 경우 Chrome, Firefox 및 일부 IE 버전에서 다음을 사용할 수 있습니다.
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}
그리고 다음 예제는 그 용도를 보여줍니다.
downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");
function download(dataurl, filename) {
var a = document.createElement("a");
a.href = dataurl;
a.setAttribute("download", filename);
a.click();
}
download("data:text/html,HelloWorld!", "helloWorld.txt");
또는:
function download(url, filename) {
fetch(url).then(function(t) {
return t.blob().then((b)=>{
var a = document.createElement("a");
a.href = URL.createObjectURL(b);
a.setAttribute("download", filename);
a.click();
}
);
});
}
download("https://get.geojs.io/v1/ip/geo.json","geoip.json")
download("data:text/html,HelloWorld!", "helloWorld.txt");
내 경험을 공유하고 누군가가 Firefox에서 작동하지 않는 다운로드 및 2014에 대한 업데이트 된 답변을 멈출 수 있도록 돕고 싶습니다. 아래 스 니펫은 firefox와 chrome 모두에서 작동하며 파일 이름을 허용합니다.
// Construct the <a> element
var link = document.createElement("a");
link.download = thefilename;
// Construct the uri
var uri = 'data:text/csv;charset=utf-8;base64,' + someb64data
link.href = uri;
document.body.appendChild(link);
link.click();
// Cleanup the DOM
document.body.removeChild(link);
Here is a pure JavaScript solution I tested working in Firefox and Chrome but not in Internet Explorer:
function downloadDataUrlFromJavascript(filename, dataUrl) {
// Construct the 'a' element
var link = document.createElement("a");
link.download = filename;
link.target = "_blank";
// Construct the URI
link.href = dataUrl;
document.body.appendChild(link);
link.click();
// Cleanup the DOM
document.body.removeChild(link);
delete link;
}
Cross-browser solutions found up until now:
downloadify -> Requires Flash
databounce -> Tested in IE 10 and 11, and doesn't work for me. Requires a servlet and some customization. (Incorrectly detects navigator. I had to set IE in compatibility mode to test, default charset in servlet, JavaScript options object with correct servlet path for absolute paths...) For non-IE browsers, it opens the file in the same window.
download.js -> http://danml.com/download.html Another library similar but not tested. Claims to be pure JavaScript, not requiring servlet nor Flash, but doesn't work on IE <= 9.
There are several solutions but they depend on HTML5 and haven't been implemented completely in some browsers yet. Examples below were tested in Chrome and Firefox (partly works).
- Canvas example with save to file support. Just set your
document.location.href
to the data URI. - Anchor download example. It uses
<a href="your-data-uri" download="filename.txt">
to specify file name.
Combining answers from @owencm and @Chazt3n, this function will allow download of text from IE11, Firefox, and Chrome. (Sorry, I don't have access to Safari or Opera, but please add a comment if you try and it works.)
initiate_user_download = function(file_name, mime_type, text) {
// Anything but IE works here
if (undefined === window.navigator.msSaveOrOpenBlob) {
var e = document.createElement('a');
var href = 'data:' + mime_type + ';charset=utf-8,' + encodeURIComponent(text);
e.setAttribute('href', href);
e.setAttribute('download', file_name);
document.body.appendChild(e);
e.click();
document.body.removeChild(e);
}
// IE-specific code
else {
var charCodeArr = new Array(text.length);
for (var i = 0; i < text.length; ++i) {
var charCode = text.charCodeAt(i);
charCodeArr[i] = charCode;
}
var blob = new Blob([new Uint8Array(charCodeArr)], {type: mime_type});
window.navigator.msSaveOrOpenBlob(blob, file_name);
}
}
// Example:
initiate_user_download('data.csv', 'text/csv', 'Sample,Data,Here\n1,2,3\n');
One may also initiate data URL downloads via JavaScript. See https://stackoverflow.com/a/13696029/271577 for such a solution (along with text link examples).
For anyone having issues in IE:
Please upvote the answer here by Yetti: saving canvas locally in IE
dataURItoBlob = function(dataURI) {
var binary = atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: 'image/png'});
}
var blob = dataURItoBlob(uri);
window.navigator.msSaveOrOpenBlob(blob, "my-image.png");
Your problem essentially boils down to "not all browsers will support this".
You could try a workaround and serve the unzipped files from a Flash object, but then you'd lose the JS-only purity (anyway, I'm not sure whether you currently can "drag files into browser" without some sort of Flash workaround - is that a HTML5 feature maybe?)
참고URL : https://stackoverflow.com/questions/3916191/download-data-url-file
'programing' 카테고리의 다른 글
자바 스크립트 및 정규식 : 문자열을 분할하고 구분 기호 유지 (0) | 2020.08.14 |
---|---|
Angular CLI 오류 : serve 명령을 Angular 프로젝트에서 실행해야하지만 프로젝트 정의를 찾을 수 없습니다. (0) | 2020.08.14 |
Bash에서 파일을 바꾸는 효율적인 방법 (0) | 2020.08.14 |
JavaScript에서 개체 / 배열의 성능은 무엇입니까? (0) | 2020.08.14 |
QMake .pro 파일에서 다른 디버그 / 릴리스 출력 디렉토리를 지정하는 방법 (0) | 2020.08.14 |