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

예를 들어 링크를 따라 가면

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")

아니.

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

앵커 요소에 다운로드 속성을 추가 할 수 있습니다.

견본:

<a download="abcd.cer"
    href="data:application/stream;base64,MIIDhTC......">down</a>

이 링크를보십시오 : http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html

인용문:

;
최소한 Opera에서 다음과 같이 ; base64와 함께 작동합니다 (문제가 발생하지 않습니다 ).

data : text / plain; charset = utf-8; headers = 콘텐츠 배치 % 3A % 20 첨부 파일 % 3B % 20filename % 3D % 22with % 20spaces.txt % 22 % 0D % 0AContent-Language % 3A % 20en; base64,4oiaDQo % 3D

또한 토론의 나머지 메시지에 일부 정보가 있습니다.

서비스 워커를 사용하면 이것이 진정한 의미에서 마침내 가능합니다.

1. 가짜 URL을 만듭니다. 예를 들어 /saveAs/myPrettyName.jpg
2. <a href, <img src"실제"URL로 수행 할 수있는 모든 것, window.open (url)에 URL을 사용하십시오 .
3. 작업자 내부에서 페치 이벤트를 포착하고 올바른 데이터로 응답하십시오.

브라우저는 이제 사용자가 새 탭에서 파일을 열어 저장하려고해도 myPrettyName.jpg를 제안합니다. 파일이 서버에서 온 것처럼 정확하게됩니다.

// In the service worker
self.addEventListener( 'fetch', function(e)
{
    if( e.request.url.startsWith( '/blobUri/' ) )
    {
        // Logic to select correct dataUri, and return it as a Response
        e.respondWith( dataURLAsRequest );
    }
});

Google 코드에는 나를 위해 일한 작은 해결 방법 스크립트가 있습니다.

http://code.google.com/p/download-data-uri/

데이터가 포함 된 양식을 추가하고 제출 한 다음 양식을 다시 제거합니다. 해키, 그러나 그것은 나를 위해 일을했다. jQuery가 필요합니다.

이 스레드는 Google 코드 페이지 이전에 Google에 나타 났으며 여기에 링크가 있으면 도움이 될 것이라고 생각했습니다.

다음은 Holf 버전을 기반으로 한 jQuery 버전이며 Chrome 및 Firefox에서 작동하지만 그의 버전은 Chrome에서만 작동하는 것으로 보입니다. 이 작업을 수행하기 위해 몸에 무언가를 추가하는 것은 약간 이상하지만 누군가 더 나은 옵션이 있다면 나는 그게 전부입니다.

var exportFileName = "export-" + filename;
$('<a></a>', {
    "download": exportFileName,
    "href": "data:," + JSON.stringify(exportData, null,5),
    "id": "exportDataID"
}).appendTo("body")[0].click().remove();

일종의 해킹이지만 이전과 같은 상황에있었습니다. Javascript에서 동적으로 텍스트 파일을 생성하고 data-URI로 인코딩하여 다운로드를 제공하려고했습니다.

이는 사소한 주요 사용자 개입으로 가능합니다. 링크를 생성하십시오 <a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a>. 내가 말했듯이, 이것은 우아하지 않지만 전문적인 솔루션이 필요하지 않은 경우 작동합니다.

플래시를 사용하여 이름을 클립 보드에 먼저 복사하면 고통이 줄어 듭니다. 물론 플래시 또는 Java를 사용하게한다면 (지금은 브라우저 지원이 점점 줄어들고 있다고 생각하십니까?)이를 수행하는 다른 방법을 찾을 수 있습니다.

이것은 Firefox 43.0 (이전 버전은 테스트되지 않음)에서 작동합니다.

dl.js :

function download() {
  var msg="Hello world!";
  var blob = new File([msg], "hello.bin", {"type": "application/octet-stream"});

  var a = document.createElement("a");
  a.href = URL.createObjectURL(blob);

  window.location.href=a;
}

dl.html

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <title>Test</title>
    <script type="text/javascript" src="dl.js"></script>
</head>

<body>
<button id="create" type="button" onclick="download();">Download</button>
</body>
</html>

버튼을 클릭하면 hello.bin 이라는 파일이 제공됩니다 . 트릭은 Blob 대신 File 을 사용하는 것입니다 .

참조 : https://developer.mozilla.org/de/docs/Web/API/File

var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
var sessionId ='\n';
var token = '\n';
var caseId = CaseIDNumber + '\n';
var url = casewebUrl+'\n';
var uri = sessionId + token + caseId + url;//data in file
var fileName = "file.i4cvf";// any file name with any extension
if (isIE)
    {
            var fileData = ['\ufeff' + uri];
            var blobObject = new Blob(fileData);
            window.navigator.msSaveOrOpenBlob(blobObject, fileName);
    }
    else //chrome
    {
        window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
         window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function (fs) {
            fs.root.getFile(fileName, { create: true }, function (fileEntry) { 
                fileEntry.createWriter(function (fileWriter) {
                    var fileData = ['\ufeff' + uri];
                    var blob = new Blob(fileData);
                    fileWriter.addEventListener("writeend", function () {
                        var fileUrl = fileEntry.toURL();
                        var link = document.createElement('a');
                        link.href = fileUrl;
                        link.download = fileName;
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }, false);
                    fileWriter.write(blob);
                }, function () { });
            }, function () { });
         }, function () { });
    }

실제로 Chrome과 FireFox에서이를 달성 할 수 있습니다.

다음 URL을 시도하면 사용 된 코드가 다운로드됩니다.

data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==