Загрузка файла - Как я могу контролировать имя файла и уважать предпочтения пользователей?

Question

У меня есть URL-адрес блоба и кнопка на моем сайте.Пользователь может нажать на эту кнопку, и BLOB-объект откроется в новой вкладке.

<a class="downloadlink" id="downloadlink" target="_blank" href="[[_blobUrl]]"></a>

Это работает.

Если у пользователя есть настройка для типа файла позади этого BLOB-объекта (например, PDF) чтобы сохранить файл вместо предварительного просмотра в браузере, файл загружается, конечно.Но Firefox создает случайное имя файла в формате

[a-zA-Z0-9]{8}\.pdf

Chrome использует blob uuid и добавляет pdf.

Как я могу контролировать имя файла И уважать предпочтения пользователей?

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

Обновление для Firefox: Я получил решение для Firefox, но ононе работает в хроме.Вместо

this._blobUrl = URL.createObjectURL(blob);

я делаю

let file = new File([blob], this.downloadname, {type: 'application/pdf'});
this._blobUrl = URL.createObjectURL(file);

Answer 1

Chrome предоставляет это предпочтение через словарь navigator.plugins.Если этот объект содержит PDF Reader, то вы знаете, что пользователь хочет видеть его в своем браузере.

const opensInBrowser = [...navigator.plugins].some(plug => [...plug].some(mime => mime.type === 'application/pdf'))
console.log(opensInBrowser);

Но это работает только для Chrome.Firefox не раскрывает эту информацию здесь (IIRC они технически не используют плагин для отображения PDF).Это означает, что мы не можем использовать только this;Firefox всегда будет помечен как не открывающийся в браузере, хотя вполне может быть так.

Так что я думаю, что единственный путь - это еще очень длинный ... подробно изложен здесь. .

Используя Service Worker, мы можем подделать запрос к именованному файлу, который Chrome будет использовать для установки имени как загруженного файла, так и файла pdf, читаемого плагином.

Это происходит до тех пор, пока они не следуют Firefox при корректной пересылке Файл Имена объектов через URI Blob, которые указывают на них.

Answer 2

Самое простое решение (которое также должно работать с IE10) - создать элемент a, прикрепить его к телу, задать его имя, позволить пользователю загрузить его и удалить после, что-то вроде этого:

function save(){
  const file = new File(['this is where BLOB should go'], {type: 'application/pdf'}); // edit this line to have access to source blob
  const link = document.createElement('a');

  link.href = URL.createObjectURL(file);
  link.download = 'this is the name.pdf';

  document.body.appendChild(link);
  link.click();

  document.body.removeChild(link);
}

window.save = save;

и для HTML:

<a class="downloadlink" id="downloadlink" target="_blank" onclick='save()'>here is your link</a>

рабочий пример можно найти здесь

обратите внимание:

• Вы должны отредактироватьonclick функция для передачи большого двоичного объекта, который вы ожидаете получить в качестве выходного файла
• в примере я создал только pdf, однако вы можете довольно легко расширить эту функциональность для любого типа документа, который вынеобходимость (и распознается данным браузером)