Имя файла загруженного файла: Application/octet-stream;

Я пытаюсь загрузить файл с использованием данных uri следующим образом:

<input type="button"
  onclick="window.location.href='data:Application/octet-stream;content-disposition:attachment;filename=file.txt,${details}'"
  value="Download"/>

Проблема заключается в том, что загруженный файл всегда называется "Неизвестно", независимо от того, что я пытаюсь использовать как имя файла. Это правильный способ дать файлу имя? или что-то еще должно быть сделано?

Ответы

Ответ 1

В этом решении вам просто нужно добавить атрибут download для привязки тега a с желаемым именем

<a href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333"
  download="somedata.csv">Example</a>

Другим решением является использование JQuery/Javascript

Свойство загрузки якоря

Ответ 2

В Safari вы можете использовать это и инструктировать пользователя в файле ⌘-S:

window.open('data:text/csv;base64,' + encodeURI($window.btoa(content)));

В противном случае используется Filesaver.js, но работает нормально:

    var downloadFile = function downloadFile(content, filename) {
      var supportsDownloadAttribute = 'download' in document.createElement('a');

      if(supportsDownloadAttribute) {
        var link = angular.element('<a/>');
        link.attr({
          href: 'data:attachment/csv;base64,' + encodeURI($window.btoa(content)),
          target: '_blank',
          download: filename
        })[0].click();
        $timeout(function() {
          link.remove();
        }, 50);
      } else if(typeof safari !== 'undefined') {
        window.open('data:attachment/csv;charset=utf-8,' + encodeURI(content));
      } else {
        var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
        saveAs(blob, filename);
      }
    }

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

Ответ 3

Для тех, кто использует другие библиотеки, такие как angularjs или позвоночник, вы можете попробовать что-то вроде этого.

$('a.download'). attr ('href', 'data: application/csv; charset = utf-8,' + $scope.data);

Ответ 4

У меня была такая же проблема, и, наконец, я решил во всех браузерах, обслуживающих CSV файл на стороне сервера:

const result = json2csv({ data });

res.writeHead(200
        'Content-Type': 'application/octet-stream',
        'Content-Disposition': 'attachment;filename=issues.csv',
        'Content-Length': result.length
});

res.end(result);

Ответ 5

Для всех, кто ищет решение на стороне клиента, использующее только Javascript, вот мое, работающее на любом браузере, кроме IE 10 и ниже (и Edge... почему?!):

var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(csv);
var link = document.createElement('a');
link.setAttribute("download", "extract.csv");
link.setAttribute("href", uri);
document.body.appendChild(link);
link.click();
body.removeChild(body.lastChild);