Скачать файл данных url

Question

Я играю над идеей создания полностью основанной на javascript утилиты zip / unzip, к которой любой может получить доступ из браузера.Они могут просто перетащить свой почтовый индекс прямо в браузер, и это позволит им загрузить все файлы внутри.Они также могут создавать новые zip-файлы, перетаскивая отдельные файлы внутрь.

Я знаю, что было бы лучше сделать это на стороне сервера, но этот проект просто для развлечения.

Перетаскивание файловв браузере должно быть достаточно легко, если я воспользуюсь различными доступными методами.(стиль Gmail)

Надеюсь, кодирование / декодирование должно быть в порядке.Я видел несколько z3-библиотек as3, так что я уверен, что со мной все будет в порядке.

Моя проблема - загрузка файлов в конце ..

window.location = 'data:jpg/image;base64,/9j/4AAQSkZJR....' 

это прекрасно работает вFirefox, но не в хром.

Я могу встраивать файлы как изображения, которые можно найти в chrome, используя <img src="data:jpg/image;ba.." />, но файлы не обязательно будут изображениями.Они могут быть любого формата.

Кто-нибудь может придумать другое решение или какой-нибудь способ обойти?

Answer 1

Если вы также хотите присвоить файлу предлагаемое имя (вместо «загрузки» по умолчанию), вы можете использовать следующее в Chrome, Firefox и некоторых версиях IE:

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

И следующий пример показывает, что он используется:

downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");

Answer 2

Идеи:

• Попробуйте <a href="data:...." target="_blank"> (не проверено)

• Используйте загрузить вместо URL-адресов данных (будет работать и для IE)

Answer 3

Хочу поделиться своим опытом и помочь кому-то, застрявшему на загрузках, не работающих в Firefox, и обновившим ответ до 2014 года. Приведенный ниже фрагмент кода будет работать как в Firefox, так и в Chrome, и будет принимать имя файла:

  // Construct the <a> element
  var link = document.createElement("a");
  link.download = thefilename;
  // Construct the uri
  var uri = 'data:text/csv;charset=utf-8;base64,' + someb64data
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  // Cleanup the DOM
  document.body.removeChild(link);

Answer 4

function download(dataurl, filename) {
  var a = document.createElement("a");
  a.href = dataurl;
  a.setAttribute("download", filename);
  a.click();
  return false;
}

download("data:text/html,HelloWorld!", "helloWorld.txt");

или:

function download(url, filename) {
fetch(url).then(function(t) {
    return t.blob().then((b)=>{
        var a = document.createElement("a");
        a.href = URL.createObjectURL(b);
        a.setAttribute("download", filename);
        a.click();
    }
    );
});
}

download("https://get.geojs.io/v1/ip/geo.json","geoip.json")
download("data:text/html,HelloWorld!", "helloWorld.txt");

Answer 5

Существует несколько решений, но они зависят от HTML5 и еще не были полностью реализованы в некоторых браузерах. Приведенные ниже примеры были протестированы в Chrome и Firefox (частично работает).

1. Пример холста с поддержкой сохранения в файл. Просто установите document.location.href на URI данных.
2. Пример загрузки Anchor . Для указания имени файла используется <a href="your-data-uri" download="filename.txt">.

Answer 6

Вот чистое решение JavaScript, которое я тестировал, работая в Firefox и Chrome, но не в Internet Explorer:

function downloadDataUrlFromJavascript(filename, dataUrl) {

    // Construct the 'a' element
    var link = document.createElement("a");
    link.download = filename;
    link.target = "_blank";

    // Construct the URI
    link.href = dataUrl;
    document.body.appendChild(link);
    link.click();

    // Cleanup the DOM
    document.body.removeChild(link);
    delete link;
}

Кросс-браузерные решения, найденные до сих пор:

downloadify -> Требуется Flash

databounce -> Протестировано в IE 10 и 11 и не работает для меня. Требуется сервлет и некоторые настройки. (Неправильно обнаруживает навигатор. Мне нужно было установить IE в режиме совместимости для тестирования, кодировку по умолчанию в сервлете, объект параметров JavaScript с правильным путем сервлета для абсолютных путей ...) Для браузеров, отличных от IE, файл открывается в том же окне.

download.js -> http://danml.com/download.html Другая библиотека, похожая, но не проверенная. Заявляет, что является чистым JavaScript, не требует сервлетов или Flash, но не работает в IE <= 9. </p>

Answer 7

Сочетая ответы от @owencm и @ Chazt3n, эта функция позволит загружать текст из IE11, Firefox и Chrome. (Извините, у меня нет доступа к Safari или Opera, но, пожалуйста, добавьте комментарий, если вы попробуете, и это работает.)

initiate_user_download = function(file_name, mime_type, text) {
    // Anything but IE works here
    if (undefined === window.navigator.msSaveOrOpenBlob) {
        var e = document.createElement('a');
        var href = 'data:' + mime_type + ';charset=utf-8,' + encodeURIComponent(text);
        e.setAttribute('href', href);
        e.setAttribute('download', file_name);
        document.body.appendChild(e);
        e.click();
        document.body.removeChild(e);
    }
    // IE-specific code
    else {
        var charCodeArr = new Array(text.length);
        for (var i = 0; i < text.length; ++i) {
            var charCode = text.charCodeAt(i);
            charCodeArr[i] = charCode;
        }
        var blob = new Blob([new Uint8Array(charCodeArr)], {type: mime_type});
        window.navigator.msSaveOrOpenBlob(blob, file_name);
    }
}

// Example:
initiate_user_download('data.csv', 'text/csv', 'Sample,Data,Here\n1,2,3\n');

Answer 8

Можно также инициировать загрузку URL-адресов данных через JavaScript. См. https://stackoverflow.com/a/13696029/271577 для такого решения (вместе с примерами текстовых ссылок).

Answer 9

Для тех, у кого есть проблемы в IE:

Пожалуйста, подтвердите ответ здесь Йети: локальное сохранение холста в IE

dataURItoBlob = function(dataURI) {
    var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/png'});
}

var blob = dataURItoBlob(uri);
window.navigator.msSaveOrOpenBlob(blob, "my-image.png");

Answer 10

Ваша проблема сводится к тому, что "не все браузеры будут поддерживать это".

Вы можете попробовать обходной путь и обслужить разархивированные файлы из объекта Flash, но тогда вы потеряете чистоту только для JS (в любом случае, я не уверен, что вы в настоящее время можете «перетаскивать файлы в браузер» без каких-либо действий). обходного решения Flash - может быть, это особенность HTML5?)