Как установить контент-расположение = вложение через JavaScript?

Question

Как я могу установить content-disposition = attachment с помощью javascript?

По сути, я хотел бы вызвать операцию «Сохранить как» после загрузки страницы через Javascript, используя Firefox.

Как можноЯ делаю это?

Answer 1

Content-Disposition является заголовком ответа , т.е.сервер должен вернуть его.Вы не можете достичь этого с помощью клиентского JavaScript.

Answer 2

Браузеры Firefox и Chromium поддерживают атрибут download .Если вам нужна лучшая совместимость сейчас , используйте флэш-память Downloadify в качестве запасного.1013 * атрибут:

<a download href="http://upload.wikimedia.org/wikipedia/commons/b/bb/Wikipedia_wordmark.svg">Download</a>

---

Только Javascript: Вы можете сохранить любой файл с этим кодом:

function saveAs(uri) {
    var link = document.createElement('a');
    if (typeof link.download === 'string') {
        link.href = uri;
        link.setAttribute('download', true);

        //Firefox requires the link to be in the body
        document.body.appendChild(link);

        //simulate click
        link.click();

        //remove the link when done
        document.body.removeChild(link);
    } else {
        window.open(uri);
    }
}

var file = 'http://upload.wikimedia.org/wikipedia/commons/b/bb/Wikipedia_wordmark.svg';
saveAs(file);

Answer 3

1.Используйте атрибут «загрузить» (HTML5) привязки

<a href='abc.pdf' download>Click Here</a>

2.Создать href программно, используя js,

const link = document.createElement('a');
link.href = '/xyz/abc.pdf';
link.download = "file.pdf";
link.dispatchEvent(new MouseEvent('click'));

Согласно Mozilla doc Элемент привязки , атрибут загрузки (HTML5) дает указание браузерам загружать URL-адрес вместо перехода к нему.

Важные примечания:

• Этот атрибут работает только для URL-адресов одного и того же происхождения.
• Хотя URL-адреса HTTP (s) должны быть одного происхождения, BLOB-объекты: URL-адреса и данные: URL-адреса разрешены, чтобы можно было загружать содержимое, создаваемое JavaScript, например изображения, созданные в веб-приложении для редактирования изображений.

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

• на стороне клиента
• Серверный

Клиентское решение: ->

Обход этой проблемы, упоминаемый во втором примечании. То есть можно использовать объект blob с помощью fetch js API

url = 'https://aws.something/abc.pdf';

fetch(url, {
      method: 'GET',
    }).then(function(resp) {
      return resp.blob();
    }).then(function(blob) {
      const newBlob = new Blob([blob], { type: "application/pdf", charset: "UTF-8" })

      // IE doesn't allow using a blob object directly as link href
      // instead it is necessary to use msSaveOrOpenBlob
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(newBlob);
        return;
      }
      const data = window.URL.createObjectURL(newBlob);
      const link = document.createElement('a');
      link.dataType = "json";
      link.href = data;
      link.download = "file.pdf";
      link.dispatchEvent(new MouseEvent('click'));
      setTimeout(function () {
        // For Firefox it is necessary to delay revoking the ObjectURL
        window.URL.revokeObjectURL(data), 60
      });
    });

Серверное решение: ->

Другой вариант, если вы можете контролировать заголовки ответа на стороне сервера, тогда это может быть лучшим вариантом.

В обычном HTTP-ответе заголовок ответа Content-Disposition является заголовком, указывающим, предполагается ли, что контент будет отображаться в браузере как встроенный, то есть как веб-страница или как часть Веб-страница или вложение, которое загружается и сохраняется локально. * 1038 например *

Content-Disposition: attachment
Content-Disposition: attachment; filename="filename.jpg"

Для файла, размещенного на AWS, можно редактировать заголовки его ответов, их можно изменить в метаданных, добавить заголовок расположения содержимого в метаданных в файле или свойствах папки, добавить ключ в качестве расположения содержимого и значения как приложение,

content-disposition : attachment

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