[javascript] data : URI를 사용할 때 제안 된 파일 이름을 지정하는 방법이 있습니까?

JAVASCRIPT / 글쓴이

예를 들어 링크를 따라 가면

data:application/octet-stream;base64,SGVsbG8=

브라우저는 하이퍼 링크 자체에서 base64로 보관 된 데이터로 구성된 파일을 다운로드하라는 메시지를 표시합니다. 마크 업에서 기본 이름을 제안하는 방법이 있습니까? 그렇지 않은 경우 JavaScript 솔루션이 있습니까?

답변

download속성을 사용하십시오 .

<a download='FileName' href='your_url'>

에 라이브 예를 html5-demos.appspot.com / … .

현재 Chrome, Firefox, Edge, Opera 및 데스크톱 Safari에서는 작동하지만 iOS Safari 또는 IE11에서는 작동하지 않습니다.

답변

요즘 크롬은 이것을 매우 간단하게 만듭니다.

function saveContent(fileContents, fileName)
{
    var link = document.createElement('a');
    link.download = fileName;
    link.href = 'data:,' + fileContents;
    link.click();
}

답변

HTML 만 해당 :download 속성을 사용하십시오 .

<a download="logo.gif" href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">Download transparent png</a>

스 니펫 확장

자바 스크립트 만 해당 : 이 코드를 사용하여 모든 데이터 URI를 저장할 수 있습니다.

function saveAs(uri, filename) {
  var link = document.createElement('a');
  if (typeof link.download === 'string') {
    link.href = uri;
    link.download = filename;

    //Firefox requires the link to be in the body
    document.body.appendChild(link);

    //simulate click
    link.click();

    //remove the link when done
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
}

var file = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
saveAs(file, 'logo.gif');

스 니펫 확장

Chrome, Firefox 및 Edge 13+ 는 지정된 파일 이름을 사용합니다.

IE11, 에지 (12), 사파리 (9)는 (이 지원하지 않는 download속성 ) 기본 이름을 사용하여 파일을 다운로드합니다 또는 그들은 단순히 그것을 표시 가 지원되는 파일 유형의 경우, 새 탭에서 : 이미지, 동영상, 오디오 파일을 …

답변

RFC 2397 에 따르면 , 없습니다.

어느 쪽이든 사용할 수 있는 요소의 속성 이없는 것 같습니다 <a>.

그러나 HTML5는 지원을 작성하는 시점에 보편적이지 않지만 (예를 들어 MSIE 지원이 아님) 요소에 download속성을 도입했습니다.<a>

답변

netwerk / protocol / data / nsDataHandler.cpp의 파이어 폭스 소스에서 조금 보았습니다.

Data Handler는 내용 / 유형 및 문자 세트 만 구문 분석하고 문자열에 “; base64″가 있는지 확인합니다.

rfc는 파일 이름을 지정하지 않으며 최소한 firefox는 파일 이름을 처리하지 않습니다. 코드는 임의의 이름에 “.part”를 추가합니다.

파이어 폭스 로그도 확인했습니다.

[b2e140]: DOCSHELL 6e5ae00 InternalLoad data:application/octet-stream;base64,SGVsbG8=
[b2e140]: Found extension '' (filename is '', handling attachment: 0)
[b2e140]: HelperAppService::DoContent: mime 'application/octet-stream', extension ''
[b2e140]: Getting mimeinfo from type 'application/octet-stream' ext ''
[b2e140]: Extension lookup on '' found: 0x0
[b2e140]: Ext. lookup for '' found 0x0
[b2e140]: OS gave back 0x43609a0 - found: 0
[b2e140]: Searched extras (by type), rv 0x80004005
[b2e140]: MIME Info Summary: Type 'application/octet-stream', Primary Ext ''
[b2e140]: Type/Ext lookup found 0x43609a0

모질라 소스를보고 싶다면 흥미로운 파일 :

data uri handler: netwerk/protocol/data/nsDataHandler.cpp
where mozilla decides the filename: uriloader/exthandler/nsExternalHelperAppService.cpp
InternalLoad string in the log: docshell/base/nsDocShell.cpp

나는 당신이 해결책을 찾지 않을 수 있다고 생각합니다.

이 스레드에서 알 수 있듯이 html5는 download속성을 가지고 있으며 firefox 20에서도 작동합니다 .

답변

다음 자바 스크립트 스 니펫은 링크의 새로운 ‘다운로드’속성을 사용하고 클릭을 시뮬레이션하여 Chrome에서 작동합니다.

function downloadWithName(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  link.click();
}

그리고 다음 예제는 그 사용법을 보여줍니다.

downloadWithName("data:,Hello%2C%20World!", "helloWorld.txt")

답변

아니.

전체 목적은 파일이 아니라 데이터 스트림이라는 것입니다. 데이터 소스는 파일로 파일을 처리하는 사용자 에이전트에 대한 지식이 없어야합니다.