Apakah ada cara untuk menentukan nama file yang disarankan saat menggunakan data: URI?

Jika misalnya Anda mengikuti tautan:

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

Browser akan meminta Anda untuk mengunduh file yang terdiri dari data yang disimpan sebagai base64 di hyperlink itu sendiri. Apakah ada cara untuk menyarankan nama default di markup? Jika tidak, apakah ada solusi JavaScript?

Gunakan downloadatribut:

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

Hidup misalnya pada html5-demos.appspot.com / ... .

Saat ini berfungsi pada Chrome, Firefox, Edge, Opera, dan desktop Safari tetapi tidak untuk iOS Safari atau IE11.

Chrome membuat ini sangat sederhana hari ini:

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

Hanya HTML: gunakan downloadatribut:

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

Hanya Javascript: Anda dapat menyimpan data URI apa pun dengan kode ini:

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, dan Edge 13+ akan menggunakan nama file yang ditentukan.

IE11, Edge 12, dan Safari 9 (yang tidak mendukung downloadatribut ) akan mengunduh file dengan nama default mereka atau mereka hanya akan menampilkannya di tab baru, jika itu jenis file yang didukung: gambar, video, file audio , ...

Menurut RFC 2397 , tidak, tidak ada.

Ada juga tidak muncul untuk menjadi setiap atribut dari <a>elemen yang Anda dapat menggunakan salah.

Namun HTML5 kemudian memperkenalkan downloadatribut pada <a>elemen, meskipun pada saat penulisan dukungan tidak universal (tidak ada dukungan MSIE, misalnya)

Saya telah melihat sedikit sumber firefox di netwerk / protokol / data / nsDataHandler.cpp

pengendali data hanya mem-parsing konten / tipe dan charset, dan terlihat jika ada "; base64" di dalam string

rfc tidak menentukan nama file dan setidaknya firefox tidak menangani nama file untuk itu, kode menghasilkan nama acak ditambah ".part"

Saya juga sudah memeriksa log 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

file yang menarik jika Anda ingin melihat sumber 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

Saya pikir Anda dapat berhenti mencari solusi untuk saat ini, karena saya curiga tidak ada :)

seperti yang terlihat di utas ini html5 memiliki downloadatribut, ia bekerja juga di firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

Cuplikan Javascript berikut berfungsi di Chrome dengan menggunakan atribut tautan 'unduh' baru dan mensimulasikan klik.

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

Dan contoh berikut menunjukkan penggunaannya:

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

Tidak.

Seluruh tujuannya adalah bahwa ini adalah datastream, bukan file. Sumber data seharusnya tidak memiliki pengetahuan tentang agen pengguna yang menanganinya sebagai file ... dan tidak.

Anda dapat menambahkan atribut unduhan ke elemen jangkar.

Sampel:

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

Lihatlah tautan ini: http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html

Mengutip:

Ia bahkan berfungsi (seperti pada, tidak menyebabkan masalah) dengan; base64 di akhir
seperti ini (setidaknya di Opera):

data: teks / polos; charset = utf-8; header = Konten-Disposisi% 3A% 20attachment% 3B% 20filename% 3D% 22dengan% 20spaces.txt% 22% 0D% 0Konten-Bahasa% 3A% 20en; base64,4oiaDQo% 3D

Juga ada beberapa info dalam pesan-pesan sisa diskusi.

Menggunakan pekerja layanan , ini akhirnya mungkin dalam arti yang sebenarnya.

1. Buat URL palsu. Misalnya /saveAs/myPrettyName.jpg
2. Gunakan URL di <a href, <img src, window.open (url), benar-benar segala sesuatu yang dapat dilakukan dengan URL "nyata".
3. Di dalam pekerja, tangkap acara pengambilan, dan tanggapi dengan data yang benar.

Browser sekarang akan menyarankan myPrettyName.jpg bahkan jika pengguna membuka file di tab baru, dan mencoba untuk menyimpannya di sana. Ini akan persis seperti jika file itu berasal dari server.

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

Ada skrip solusi kecil di Google Code yang berfungsi untuk saya:

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

Itu menambahkan formulir dengan data di dalamnya, mengirimkannya dan kemudian menghapus formulir itu lagi. Meretas, tetapi itu berhasil bagi saya. Membutuhkan jQuery.

Utas ini muncul di Google sebelum laman Kode Google dan saya pikir mungkin ada gunanya memiliki tautan di sini juga.

Ini adalah versi jQuery yang didasarkan pada versi Holf dan bekerja dengan Chrome dan Firefox sedangkan versinya tampaknya hanya berfungsi dengan Chrome. Agak aneh menambahkan sesuatu ke tubuh untuk melakukan ini, tetapi jika seseorang memiliki pilihan yang lebih baik saya akan melakukannya.

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

Ini semacam peretasan, tapi saya pernah mengalami situasi yang sama sebelumnya. Saya secara dinamis menghasilkan file teks dalam javascript dan ingin menyediakannya untuk diunduh dengan menyandikannya dengan data-URI.

Ini dimungkinkan dengan intervensi pengguna utama minor . Buat tautan <a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a>. Seperti yang saya katakan, ini tidak elegan, tetapi berfungsi jika Anda tidak memerlukan solusi profesional.

Ini bisa dibuat lebih tidak menyakitkan dengan menggunakan flash untuk menyalin nama ke clipboard terlebih dahulu. Tentu saja jika Anda membiarkan diri Anda menggunakan Flash atau Java (sekarang dengan dukungan browser yang semakin sedikit, saya kira?), Anda mungkin bisa menemukan cara lain untuk melakukan ini.

Ini berfungsi dengan Firefox 43.0 (lebih tua tidak diuji):

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>

Jika tombol diklik maka ditawarkan file bernama hello.bin untuk diunduh. Triknya adalah menggunakan File alih-alih Blob .

referensi: 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 () { });
    }

Anda sebenarnya dapat mencapai ini, di Chrome dan FireFox.

Coba url berikut, ini akan mengunduh kode yang digunakan.

data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==