데이터 URL 파일 다운로드

누구나 브라우저에서 액세스 할 수있는 완전한 JavaScript 기반 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);

다음은 Firefox 및 Chrome에서 테스트했지만 Internet Explorer에서는 작동하지 않는 순수한 JavaScript 솔루션입니다.

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;
}

지금까지 발견 된 크로스 브라우저 솔루션 :

downloadify-> Flash 필요

databounce-> IE 10 및 11에서 테스트되었으며 나를 위해 작동하지 않습니다. 서블릿과 일부 사용자 정의가 필요합니다. (네비게이터를 잘못 감지합니다. 테스트를 위해 IE를 호환성 모드로 설정하고, 서블릿의 기본 문자 집합, 절대 경로에 대한 올바른 서블릿 경로가있는 JavaScript 옵션 개체 ...) IE가 아닌 브라우저의 경우 동일한 창에서 파일을 엽니 다.

download.js-> http://danml.com/download.html 유사하지만 테스트되지 않은 다른 라이브러리입니다. 서블릿이나 플래시가 필요하지 않은 순수한 JavaScript라고 주장하지만 IE <= 9에서는 작동하지 않습니다.

몇 가지 솔루션이 있지만 HTML5에 의존하며 일부 브라우저에서는 아직 완전히 구현되지 않았습니다. 아래 예제는 Chrome 및 Firefox에서 테스트되었습니다 (일부 작동).

1. 파일에 저장이 지원되는 캔버스 예제 . document.location.href데이터 URI로 설정하십시오 .
2. 앵커 다운로드 예 . <a href="your-data-uri" download="filename.txt">파일 이름을 지정 하는 데 사용합니다.

@owencm 및 @ Chazt3n의 답변을 결합하여이 기능을 사용하면 IE11, Firefox 및 Chrome에서 텍스트를 다운로드 할 수 있습니다. (죄송합니다. Safari 또는 Opera에 액세스 할 수 없습니다. 시도해 보시면 작동하면 댓글을 추가해주세요.)

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');

IE에 문제가있는 사람 :

Yetti의 답변에 찬성 투표하십시오 : 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");

당신의 문제는 본질적으로 "모든 브라우저가 이것을 지원하지는 않을 것"으로 귀결됩니다.

해결 방법을 시도하고 Flash 개체에서 압축을 푼 파일을 제공 할 수 있지만 JS 전용 순도를 잃게됩니다 (어쨌든 현재 Flash 해결 방법없이 "파일을 브라우저로 드래그"할 수 있는지 확실하지 않습니다. -HTML5 기능일까요?)