Как установить имя файла большого двоичного объекта в 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 .
javascript
html
download
blob
html5-filesystem
Пепельно-синий
источник
источник
Я просто хотел расширить принятый ответ за счет поддержки 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(); }
Вот пример Fiddle . Удачи .
источник
Тот же принцип, что и в решениях выше. Но у меня были проблемы с 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) } }
jsfiddle пример
источник
Поздно, но поскольку у меня была такая же проблема, я добавляю свое решение:
function newFile(data, fileName) { var json = JSON.stringify(data); //IE11 support if (window.navigator && window.navigator.msSaveOrOpenBlob) { let blob = new Blob([json], {type: "application/json"}); window.navigator.msSaveOrOpenBlob(blob, fileName); } else {// other browsers let file = new File([json], fileName, {type: "application/json"}); let exportUrl = URL.createObjectURL(file); window.location.assign(exportUrl); URL.revokeObjectURL(exportUrl); } }
источник
revokeObjectURL
послеlocation.assign
работает нормально в Firefox, но прерывает загрузку в Chrome.saveFileOnUserDevice = function(file){ // content: blob, name: string if(navigator.msSaveBlob){ // For ie and Edge return navigator.msSaveBlob(file.content, file.name); } else{ let link = document.createElement('a'); link.href = window.URL.createObjectURL(file.content); link.download = file.name; document.body.appendChild(link); link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window})); link.remove(); window.URL.revokeObjectURL(link.href); } }
источник
link.click()
вместо отправки события мыши.Рабочий пример кнопки загрузки для сохранения фотографии кошки с адреса как «cat.jpg»:
HTML:
<button onclick="downloadUrl('https://i.imgur.com/AD3MbBi.jpg', 'cat.jpg')">Download</button>
JavaScript:
function downloadUrl(url, filename) { let xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.responseType = "blob"; xhr.onload = function(e) { if (this.status == 200) { const blob = this.response; const a = document.createElement("a"); document.body.appendChild(a); const blobUrl = window.URL.createObjectURL(blob); a.href = blobUrl; a.download = filename; a.click(); setTimeout(() => { window.URL.revokeObjectURL(blobUrl); document.body.removeChild(a); }, 0); } }; xhr.send(); }
источник
window.location.assign у меня не работал. он загружается нормально, но загружается без расширения для файла CSV на платформе Windows. Следующее сработало для меня.
var blob = new Blob([csvString], { type: 'text/csv' }); //window.location.assign(window.URL.createObjectURL(blob)); var link = window.document.createElement('a'); link.href = window.URL.createObjectURL(blob); // Construct filename dynamically and set to link.download link.download = link.href.split('/').pop() + '.' + extension; document.body.appendChild(link); link.click(); document.body.removeChild(link);
источник
Это мое решение. С моей точки зрения, вы не можете обойти
<a>
.function export2json() { const data = { a: '111', b: '222', c: '333' }; const a = document.createElement("a"); a.href = URL.createObjectURL( new Blob([JSON.stringify(data, null, 2)], { type: "application/json" }) ); a.setAttribute("download", "data.json"); document.body.appendChild(a); a.click(); document.body.removeChild(a); }
<button onclick="export2json()">Export data to json file</button>
источник