JavaScript blob filename без ссылки

Question

Как вы устанавливаете имя файла blob в JavaScript, когда принудительно загружаете его через window.location?

function newFile(data) { 
    var json = JSON.stringify(data); 
    var blob = new Blob([json], {type: "octet/stream"}); 
    var url = window.URL.createObjectURL(blob); 
    window.location.assign(url); 
} 

Запуск выше код загружает файл мгновенно без обновления страницы, которая выглядит как bfefe410-8d9c-4883-86c5-d76c50a24a1d. Я хочу установить имя файла как my-download.json.

Answer 1

Единственный способ я знаю трюк используется FileSaver.js:

1. Создать скрытый <a> тег.
2. Установите свой атрибут href на URL-адрес блоба.
3. Установите свой атрибут download на имя файла.
4. Нажмите на тег <a>.

Вот упрощенный пример (jsfiddle):

var saveData = (function() { 
    var a = document.createElement("a"); 
    document.body.appendChild(a); 
    a.style = "display: none"; 
    return function (data, fileName) { 
     var json = JSON.stringify(data), 
      blob = new Blob([json], {type: "octet/stream"}), 
      url = window.URL.createObjectURL(blob); 
     a.href = url; 
     a.download = fileName; 
     a.click(); 
     window.URL.revokeObjectURL(url); 
    }; 
}()); 

var data = { x: 42, s: "hello, world", d: new Date() }, 
    fileName = "my-download.json"; 

saveData(data, fileName); 

Я написал этот пример только для иллюстрации идеи в производство кода использования FileSaver.js вместо этого.

Примечания

• Старые браузеры не поддерживают «скачать» атрибут, так как это часть HTML5.
• Некоторые форматы файлов считаются небезопасными браузером, и загрузка не удалась. Сохранение файлов JSON с расширением txt работает для меня.

Answer 2

 
$http.get(FILE_URL { 
          responseType: 'arraybuffer' 
          }).then(function(response) { 
          var file = new Blob([response.data], {type: fType}); 
          a.href = window.URL.createObjectURL(file); 
          a.download = fname; 
          a.click(); 
          }); 

Answer 3

Я просто хотел, чтобы расширить принятой ответ с поддержкой Internet Explorer (большинство современных версий, в любом случае), а также приведение в порядок код, используя JQuery, а также:

$(document).ready(function() { 
    saveFile("Example.txt", "data:attachment/text", "Hello, world."); 
}); 

function saveFile (name, type, data) { 
    if (data != null && navigator.msSaveBlob) 
     return navigator.msSaveBlob(new Blob([data], { type: type }), name); 
    var a = $("<a style='display: none;'/>"); 
    var url = window.URL.createObjectURL(new Blob([data], {type: type})); 
    a.attr("href", url); 
    a.attr("download", name); 
    $("body").append(a); 
    a[0].click(); 
    window.URL.revokeObjectURL(url); 
    a.remove(); 
} 

Here is an example Fiddle , Godspeed.

Answer 4

Тот же принцип, что и решения выше. Но у меня были проблемы с Firefox 52.0 (32 бит), где большие файлы (> 40 Мбайт) усекаются в случайных позициях. Повторная рассылка вызова функции revokeObjectUrl() устраняет эту проблему.

function saveFile(blob, filename) { 
    if (window.navigator.msSaveOrOpenBlob) { 
    window.navigator.msSaveOrOpenBlob(blob, filename); 
    } else { 
    const a = document.createElement('a'); 
    document.body.appendChild(a); 
    const url = window.URL.createObjectURL(blob); 
    a.href = url; 
    a.download = filename; 
    a.click(); 
    setTimeout(() => { 
     window.URL.revokeObjectURL(url); 
     document.body.removeChild(a); 
    }, 0) 
    } 
}