Есть ли способ указать предлагаемое имя файла при использовании data: URI?

Используйте атрибут download:

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

Атрибут download работает в Chrome, Firefox, Edge, Opera, настольном Safari 10+, iOS Safari 13+ , а не 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 / protocol / data / 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")

No.

Вся цель в том, чтобы это поток данных, а не файл. Источник данных не должен знать, что пользовательский агент обрабатывает его как файл ... а это не так.

вы можете добавить атрибут загрузки к элементу привязки.

образец:

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

Используя сервис-воркеров, это наконец-то возможно в самом истинном смысл.

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

Посмотрите на эту ссылку: http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html

Цитировать:

Он даже работает (например, не вызывает проблем) с; base64 в конце
вот так (по крайней мере, в Opera):

data: text / plain; charset = utf-8; headers = Content-Disposition% 3A% 20attachment% 3B% 20filename% 3D% 22with% 20spaces.txt% 22% 0D% 0AContent-Language% 3A% 20en; base64 , 4oiaDQo% 3D

Также есть информация в остальных сообщениях обсуждения.

В Google Code есть крошечный сценарий обходного пути, который у меня сработал:

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

Вот версия 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>. Как я уже сказал, это неэлегантно, но работает, если вам не нужно профессиональное решение.

Это можно сделать менее болезненным, если сначала скопировать имя в буфер обмена с помощью flash. Конечно, если вы позволите себе использовать 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 для загрузки. Уловка состоит в том, чтобы использовать File вместо Blob.

ссылка: https://developer.mozilla.org/de/docs/Web/API/File

<a href=.. download=.. > работает для щелчка левой и правой кнопкой мыши - ›сохранить ссылку как ..,

но <img src=.. download=.. > не работает при щелчке правой кнопкой мыши - ›сохранить изображение как .., рекомендуется Download.jped.

Если объединить оба: <a href=.. download=..><img src=..></a>

он работает для щелчка левой кнопкой мыши, щелчка правой кнопкой мыши - ›сохранить ссылку как .., щелчок правой кнопкой мыши -› сохранить изображение как ..

Вам нужно написать data-uri дважды (href и src), поэтому для больших файлов изображений лучше скопировать uri с помощью javascript.

протестировано с Chrome / Edge 88

Вы действительно можете добиться этого в Chrome и FireFox.

Попробуйте следующий URL-адрес, он загрузит использованный код.

data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==