Чи є спосіб вказати запропоноване ім'я файлу при використанні даних: 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.

Chrome робить це дуже просто сьогодні:

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>

Тільки Javascript: ви можете зберегти будь-який 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, Edge 12 та Safari 9 (які не підтримують downloadатрибут ) завантажують файл зі своїм іменем за замовчуванням або вони просто відображатимуть його на новій вкладці, якщо він підтримує тип файлу: зображення, відео, аудіофайли ,…

За даними RFC 2397 , ні, немає.

Там також не спостерігається ніяких атрибутів з <a>елемента , який ви можете використовувати або.

Однак згодом HTML5 ввів downloadатрибут <a>елемента, хоча на момент написання підтримка не є універсальною (наприклад, немає підтримки MSIE)

Я трохи подивився джерела Firefox у netwerk / протокол / дані / nsDataHandler.cpp

обробник даних аналізує лише вміст / тип та схему, і виглядає, якщо в рядку є "; base64"

rfc специфікує не ім'я файлу, і принаймні firefox не обробляє для нього ім'я файлу, код генерує випадкове ім'я плюс ".part"

Я також перевірив журнал firefox

[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

цікаві файли, якщо ви хочете переглянути джерела mozilla:

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 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

Наступний фрагмент Javascript працює в 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

Цитата:

Він навіть працює (як у, не викликає проблем) з; base64 наприкінці
так (як мінімум в Opera):

дані: текст / звичайний; charset = utf-8; заголовки = вміст-диспозиція% 3A% 20прикладення% 3B% 20файл% 3D% 22з% 20spaces.txt% 22% 0D% 0AContent-Language% 3A% 20en; base64,4oiaDQo% 3D

Також є інша інформація у решті повідомлень дискусії.

Використовуючи сервісних працівників , це, нарешті, можливо в справжньому розумінні.

1. Створіть підроблену URL-адресу. Наприклад /saveAs/myPrettyName.jpg
2. Використовуйте URL в <a href, <img src, 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 Code, і я подумав, що може бути корисним і тут, щоб мати посилання.

Ось версія jQuery, заснована на версії Holf і працює з 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 і хотів надати його для завантаження, кодуючи його з URI даних.

Це можливо при незначному великому втручанні користувача. Створіть посилання<a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a> . Як я вже говорив, це неелегантно, але воно працює, якщо вам не потрібно професійне рішення.

Це може бути менш болючим, використовуючи спалах, щоб спершу скопіювати ім'я у буфер обміну. Звичайно, якщо ви дозволите собі використовувати Flash або 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 .

довідка: 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==