Est-il possible de spécifier un nom de fichier suggéré lors de l'utilisation de données: URI?

Question

Si par exemple vous suivez le lien:

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

Le navigateur vous demandera de télécharger un fichier contenant des données détenues en base64 dans le lien lui-même. Est-il possible de suggérer un nom par défaut dans le balisage? Si non, existe-t-il une solution JavaScript?

Answer 1

Selon RFC 2397, non, il n'y en a pas.

Il ne semble pas non plus y avoir attribute de l'élément <a> que vous pouvez utiliser.

Cependant HTML5 a ensuite introduit l'attribut download sur l'élément <a>, bien au moment de l'écriture est un soutien universel ne (pas de support MSIE, par exemple)

Answer 2

n °

Le but entier est que c'est un flux de données, pas un fichier. La source de données ne devrait avoir aucune connaissance de l'agent utilisateur qui le gère comme un fichier ... et ce n'est pas le cas.

Answer 3

C'est un peu hackish, mais j'ai été dans la même situation avant. Je générais dynamiquement un fichier texte en javascript et je voulais le fournir en téléchargement en l'encodant avec l'URI de données.

Ceci est possible avec mineur intervention majeure de l'utilisateur. Générer un lien <a href="data:...">right-click me and select "Save Link As..." and save as "example.txt"</a>. Comme je l'ai dit, c'est inélégant, mais cela fonctionne si vous n'avez pas besoin d'une solution professionnelle. Cela peut être rendu moins douloureux en utilisant le flash pour copier le nom dans le presse-papiers en premier. Bien sûr, si vous vous permettez d'utiliser Flash ou Java (maintenant avec de moins en moins de support de navigateur je pense?), Vous pourriez probablement trouver une autre façon de le faire.

Answer 4

Regardez ce lien: http://lists.w3.org/Archives/Public/uri/2010Feb/0069.html

Quote:

Il fonctionne même (comme dans, ne provoque pas un problème) avec, à la fin base64
comme celui-ci (dans Opera au moins):

données: 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

De plus, il y a quelques informations dans les autres messages de la discussion.

Answer 5

J'ai regardé un peu dans FireFox sources Netwerk/protocole/data/nsDataHandler.cpp

gestionnaire de données

contenu ne fait qu'analyser/type et charset, et regarde s'il est "; base64" dans la chaîne Les caractéristiques de rfc aucun nom de fichier et au moins firefox ne gère aucun nom de fichier pour cela, le code génère un nom aléatoire plus ".partie »

J'ai aussi vérifié firefox journal

[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 

fichiers intéressants si vous voulez regarder les sources de 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 

Je pense que vous pouvez arrêter de chercher une solution pour l'instant , parce que je soupçonne qu'il n'y en a pas :)

comme remarqué dans ce fil html5 a download attribut, il w orks aussi sur Firefox 20 http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-download

Answer 6

Utilisez l'attribut download:

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

exemple en direct sur html5-demos.appspot.com/....

Currently works on Chrome, Firefox, Edge, Opera, mais pas Safari 10 ou IE11.

Answer 7

Il y a un script de contournement minuscule sur Google Code qui a fonctionné pour moi:

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

Il ajoute un formulaire avec les données qu'il contient, soumet et supprime ensuite à nouveau le formulaire. Hacky, mais il a fait le travail pour moi. Requiert jQuery.

Ce sujet est apparu dans Google avant la page du code Google et j'ai pensé qu'il pourrait être utile d'avoir le lien ici aussi.

Answer 8

Vous pouvez ajouter un attribut de téléchargement à l'élément d'ancrage.

échantillon:

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

Answer 9

ci-dessous extrait de code JavaScript fonctionne dans Chrome en utilisant le nouvel attribut « téléchargement » de liens et de simuler un clic.

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

Et l'exemple suivant son utilisation:

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

Answer 10

Chrome en fait très simple ces jours-ci:

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

Answer 11

Voici une version jQuery basé sur de la version de Holf et travaille avec Chrome et Firefox alors que sa version semble fonctionner uniquement avec Chrome. C'est un peu étrange d'ajouter quelque chose au corps pour le faire mais si quelqu'un a une meilleure option, je suis tout à fait pour.

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

Answer 12

HTML uniquement: utiliser l'download attribut:

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

---

Javascript seulement: vous pouvez enregistrer une URI de données avec ce code:

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, et Edge 13+ utilisera le nom de fichier spécifié.

IE11, le Edge 12 et Safari 9 (qui don't support the download attribute) va télécharger le fichier avec leur nom par défaut ou ils affichera simplement dans un nouvel onglet, si elle est d'un type de fichier pris en charge: images, vidéos , les fichiers audio, ...

---

Si besoin d'une meilleure compatibilité maintenant, utilisez la fonction flash Downloadify comme solution de repli.

Answer 13

En utilisant service workers, c'est finalement possible dans le vrai sens du terme.

1. Créez une fausse URL. Par exemple /saveAs/myPrettyName.jpg
2. Utilisez l'URL dans <a href, <img src, window.open (url), absolument tout ce qui peut être fait avec une "vraie" URL.
3. À l'intérieur de l'agent, attrapez l'événement d'extraction et répondez avec les données correctes.

Le navigateur proposera maintenant myPrettyName.jpg même si l'utilisateur ouvre le fichier dans un nouvel onglet et essaie de le sauvegarder à cet endroit. Ce sera exactement comme si le fichier venait du serveur.

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

Answer 14

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

Answer 15

Celui-ci fonctionne avec Firefox 43,0 (plus non testé):

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> 

Si le bouton est cliqué, il offre un fichier nommé hello.bin pour le téléchargement. Astuce est d'utiliser Fichier au lieu de Blob.

Référence: https://developer.mozilla.org/de/docs/Web/API/File

Answer 16

La réponse est simple que même la plupart des gens ne m'y attendais pas.

Nous pouvons simplement ajouter une barre oblique après le lien à télécharger et mettre le nom de fichier dont nous avons besoin après cette barre oblique.

Par exemple:

<a href"http://foo.goo/xxoo.mp4/nice.mp4"></a>

La boîte de dialogue de téléchargement sauterait avec un nom de fichier par défaut nice.mp4 au lieu de xxoo.mp4

Les données: URI suivre la même règle

Answer 17

Vous pouvez réellement y parvenir, dans Chrome et FireFox.

Essayez l'URL suivante, il va télécharger le code qui a été utilisé.

data:text/html;base64,PGEgaHJlZj0iZGF0YTp0ZXh0L2h0bWw7YmFzZTY0LFBHRWdhSEpsWmowaVVGVlVYMFJCVkVGZlZWSkpYMGhGVWtVaUlHUnZkMjVzYjJGa1BTSjBaWE4wTG1oMGJXd2lQZ284YzJOeWFYQjBQZ3BrYjJOMWJXVnVkQzV4ZFdWeWVWTmxiR1ZqZEc5eUtDZGhKeWt1WTJ4cFkyc29LVHNLUEM5elkzSnBjSFErIiBkb3dubG9hZD0idGVzdC5odG1sIj4KPHNjcmlwdD4KZG9jdW1lbnQucXVlcnlTZWxlY3RvcignYScpLmNsaWNrKCk7Cjwvc2NyaXB0Pg==