Как установить имя файла с помощью window.open
Я пытаюсь загрузить временный результат, рассчитанный с помощью JavaScript. Скажем, у меня есть строка str, я хочу скачать файл, содержащий str и назвал его data.csv, я использую следующий код:
window.open('data:text/csv;charset=utf-8,' + str);
Файл может быть успешно загружен, но как я могу назвать файл data.csv автоматически, а не каждый раз задавать его вручную?
Ответы
Ответ 1
Вы можете добиться этого, используя атрибут download для элементов <a>. Например:
<a href="1251354216241621.txt" download="your-foo.txt">Download Your Foo</a>
Этот атрибут указывает, что файл должен быть загружен (а не отображается, если применимо) и указывает, какое имя файла следует использовать для загруженного файла.
Вместо использования window.open() вы можете создать невидимую ссылку с атрибутом download и .click().
var str = "Name, Price\nApple, 2\nOrange, 3";
var uri = 'data:text/csv;charset=utf-8,' + str;
var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = "data.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
К сожалению, это поддерживается не во всех браузерах, но добавление не ухудшит ситуацию в других браузерах: они будут продолжать загружать файлы с бесполезными именами файлов. (Предполагается, что вы используете тип MIME в том смысле, что их браузер пытается загрузить. Если вы пытаетесь позволить пользователю загрузить файл .html вместо его отображения, это не принесет вам пользы в неподдерживаемых браузерах. )
Ответ 2
Это не работает в последнем Chrome, я изменил его, и следующий код будет работать нормально,
$("#download_1").click(function() {
var json_pre = '[{"Id":1,"UserName":"Sam Smith"},{"Id":2,"UserName":"Fred Frankly"},{"Id":1,"UserName":"Zachary Zupers"}]';
var json = $.parseJSON(json_pre);
var csv = JSON2CSV(json);
var downloadLink = document.createElement("a");
var blob = new Blob(["\ufeff", csv]);
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = "data.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
});
Итак, когда вы нажимаете кнопку download_1 id, она создает невидимую ссылку для скачивания и нажимает на нее. Я использовал другую функцию для подготовки js.
Функция JSON2CSV выглядит следующим образом:
function JSON2CSV(objArray) {
var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
var str = '';
var line = '';
if ($("#labels").is(':checked')) {
var head = array[0];
if ($("#quote").is(':checked')) {
for (var index in array[0]) {
var value = index + "";
line += '"' + value.replace(/"/g, '""') + '",';
}
} else {
for (var index in array[0]) {
line += index + ',';
}
}
line = line.slice(0, -1);
str += line + '\r\n';
}
for (var i = 0; i < array.length; i++) {
var line = '';
if ($("#quote").is(':checked')) {
for (var index in array[i]) {
var value = array[i][index] + "";
line += '"' + value.replace(/"/g, '""') + '",';
}
} else {
for (var index in array[i]) {
line += array[i][index] + ',';
}
}
line = line.slice(0, -1);
str += line + '\r\n';
}
return str;
}
Надеюсь, что это поможет другим:)
Ответ 3
Решением для IE является использование msSaveBlob и передача имени файла.
Для современных браузеров решение идет так, проверено: IE11, FF & Chrome
var csvData = new Blob([arg.data], {type: 'text/csv;charset=utf-8;'});
//IE11 & Edge
if (navigator.msSaveBlob) {
navigator.msSaveBlob(csvData, exportFilename);
} else {
//In FF link must be added to DOM to be clicked
var link = document.createElement('a');
link.href = window.URL.createObjectURL(csvData);
link.setAttribute('download', exportFilename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
Существует хороший discution о том, что здесь
Ответ 4
Более короткая версия принятой (для моего случая пришлось использовать Unicode)
var link = document.createElement("a");
link.href = 'data:text/csv,' + encodeURIComponent("algún texto");
link.download = "Example.csv";
link.click();
Ответ 5
Я пытаюсь загрузить файл в приложении React с помощью "window.open", но не могу его переименовать. (chrome 73) Загрузка работает, но я хотел бы загрузить файл с другим именем. Решения, предложенные выше, не работают. Это мой код:
download(sUrl:string, fname: string) {
// fake server request, getting the file url as response
setTimeout(() => {
const response = {
file: sUrl,
};
// server sent the url to the file!
// now, let download:
window.open(response.file, fname);
// you could also do:
// window.location.href = response.file;
}, 100);
}
Какая-то идея? Благодарю.
Ответ 6
As I am fetching the data from table by Web API like
==============================================================================
$.ajax({
url: config['ApiBase'] + **config['GetDetailsOfAllPNRsFromTable']**,
type: 'POST',
**data: JSON.stringify(dashboardRequestBody)**,
contentType: 'application/json; charset=utf-8',
dataType: 'json'
}).success(function (data) {
**topRejectErrroTodayList**=data;
$('#topRejectErrorMessage').text('Error: ' + topRejectErrorMessage);
$('#topRejectDetails').modal('show').on('shown.bs.modal', function () {
$(this).find('.modal-dialog').css({
'max-height': '100%'
});
});
if (data.length > 0) {
------
------
==============================================================================
So we got the values in data like
Array(12)
0: {Country: "FR", Record_Locator: "qqwert"}
1: {Country: "FR", Record_Locator: "123erf"}
2: {Country: "FR", Record_Locator: "dsfdsf"}
3: {Country: "FR", Record_Locator: "asdrft"}
4: {Country: "FR", Record_Locator: "98765t"}
5: {Country: "FR", Record_Locator: "12345t"}
6: {Country: "FR", Record_Locator: "nhtged"}
7: {Country: "FR", Record_Locator: "asdfdf"}
8: {Country: "FR", Record_Locator: "2w3e4r"}
9: {Country: "FR", Record_Locator: "234r5t"}
10: {Country: "FR", Record_Locator: "123456"}
11: {Country: "FR", Record_Locator: "qwedrf"}
===========================================================================
So to export the all the data in the .csv format we have writte the code like
function ExportToExcel()
{
var str = "COUNTRY, RECORD LOCATOR";
var tab_text = **topRejectErrroTodayList**;
console.log(tab_text);
if (tab_text.length > 0) {
$.each(tab_text, function (index, value) {
str = str + '\n' + value['Country'] + ',' + value['Record_Locator'];
});
}
var uri = 'data:text/csv;charset=utf-8,' + str;
var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = "data.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
===============================================================
We got the correct output like
Output:-
COUNTRY RECORD LOCATOR
BE J24FCC
DE 6YMC8P
DE 6YVRDI
DE 6YJVHT
DE 6YQEZM
DE 6YQFUT
DE 6XFS9Q
DE 6YQJZE
DE 6YWAYQ
DE 6YXVLU
DE 6YXZ2A
Thanks,Amit
