С развитием интерфейсных технологий все больше и больше бизнес-сценариев требуют внешнего интерфейса для обработки загрузки файлов. Среди множества методов загрузка через атрибут загрузки тега <a> является распространенным и относительно простым методом.
Обычный тег <a> реализует переход по ссылке через href. Если вы хотите только загрузить файл, а не перейти к предварительному просмотру, лучший способ — добавить атрибут download в тег <a> , и операцию загрузки можно легко реализовать. .
download — это новый атрибут тега <a> в HTML5. Этот атрибут вызывает запуск операции загрузки, указывая браузеру загрузить URL-адрес вместо перехода к нему и предлагать пользователю сохранить его как локальный файл. например:
<a href=result.png download>загрузить</a>
Если атрибут download отсутствует, нажатие кнопки «Загрузить» приведет к непосредственному переходу к изображению предварительного просмотра. При добавлении атрибута download начнется загрузка изображения.
Текущая совместимость атрибута download показана в caniuse:
Видно, что большинство основных браузеров в основном поддерживают атрибут download , а производительность IE впечатляет, как и прежде. В настоящее время многие Windows-системы все еще используют IE, и это также необходимо учитывать многим предприятиям. Эта проблема совместимости ограничивает более широкое применение download .
Столкнувшись с некоторыми бизнес-сценариями загрузки динамического контента, то есть адреса ресурсов, таких как изображения, не фиксированы (например, изображения, созданные некоторыми онлайн-инструментами рисования), только использование HTML не может удовлетворить потребности. Чтобы удовлетворить различные загрузки URL-адресов, через JS можно реализовать метод динамического запуска загрузок URL-адресов.
function download(href, filename='') { const a = document.createElement('a') a.download = имя файла a.href = href document.body.appendChild(a) a.click() a.remove() } Следует отметить, что операции appendChild и remove выполняемые над созданным <a> в коде, предназначены главным образом для совместимости с браузером FireFox. При вызове этого метода в браузере FireFox, если вы не добавляете созданный тег <a> в. тело, щелкните ссылку. Ссылка ничего не сделает и вызовет загрузку, чего нет в Chrome.
Вышеупомянутый метод может реализовать загрузку ресурсов одного и того же происхождения. Но во многих сценариях также необходимо обрабатывать междоменные ресурсы. К сожалению, атрибут download в настоящее время применяется только к URL-адресам одного и того же происхождения . То есть, если адрес загружаемого ресурса является междоменным, атрибут download будет недействительным, и щелчок по ссылке превратится в предварительный просмотр навигации.
Тест: Нажмите, чтобы загрузить, результатом является только предварительный просмотр, и изображение невозможно загрузить.
Примечание. Chrome 65 ранее поддерживал атрибут download для запуска междоменной загрузки файлов. Позже он строго следовал политике одного и того же источника и больше не мог запускать загрузку междоменных ресурсов через атрибут download . FireFox не поддерживает атрибут download междоменных ресурсов.
Атрибут download может не только запускать загрузку, но и указывать имя файла загрузки:
<a href=test.png download=joker.png>Загрузить</a>
Если суффикс загруженного файла соответствует суффиксу исходного файла, вы можете установить имя файла по умолчанию:
<a href=test.png download=joker>Загрузить</a>
Автор однажды столкнулся с проблемой. Загрузка междоменного ресурса запускалась через тег <a> . Код в основном был таким же, как и метод загрузки , упомянутый выше, за исключением того, что место установки атрибута download было немного другим:
a.setAttribute(загрузить, правда)
В результате в старой версии браузера Chrome произошла следующая ситуация.
Имя файла загрузки становится true . Очевидно, что браузер считывает значение атрибута download как имя файла.
После анализа вышеперечисленные проблемы в основном связаны с:
1. Прежде всего, download не должно быть установлено значение true . Значение атрибута download отличается от значения disabled . Оно напрямую связано с именем файла. И для этого метода загрузки с интерфейсом и сервером атрибут download не является обязательным.
2. Более ранние версии Chrome не только поддерживали атрибут download междоменных ресурсов, но также могли сбрасывать имена файлов междоменных ресурсов через download , поэтому возникла описанная выше ситуация.
Бизнес-сценарий, в котором интерфейсная и серверная части взаимодействуют для завершения загрузки файла, обычно реализуется серверной частью, устанавливающей информацию Content-Disposition в заголовке ответа.
В сценарии HTTP первый параметр Content-Disposition является либо встроенным (значение по умолчанию, указывающее, что тело сообщения в ответе будет отображаться как часть страницы или вся страница), либо вложенным (это означает, что тело сообщения в ответе будет отображаться как часть страницы или всей страницы). следует загрузить в локальный каталог; Большинство браузеров отобразят диалоговое окно «Сохранить как», предварительно заполнив значение имени файла именем загруженного файла).
Если Content-Disposition установлен в заголовке ответа, а внешний интерфейс также добавляет атрибут download в тег <a> соответствующей ссылки, то правила именования на данный момент следующие:
Если атрибуту Content-Disposition в заголовке HTTP присвоено имя файла, отличное от этого атрибута, атрибут заголовка HTTP имеет приоритет над этим атрибутом.
После тестирования было обнаружено, что Content-Disposition в HTTP-заголовке не пуст:
В браузере Chrome, независимо от того, установлено ли для первого параметра Content-Disposition в HTTP-заголовке значение Attachment или Inline , download не может сбросить имя файла, пока задано имя файла. Напротив, если имя файла пусто, значение атрибута download будет установлено как имя файла. В браузере FireFox браузер будет читать только значение имени файла Content-Disposition . Если имя файла пусто, будет использовано имя исходного файла. В настоящее время download все равно не может сбросить имя файла.
Подводя итог: если информация Content-Disposition не задана в заголовке ответа (например, URL-адрес того же источника, который обычно напрямую определяет ресурс), атрибут download может сбросить имя файла. Если серверная часть установила имя файла в поле Content-Disposition , значение имени файла будет иметь преимущественную силу.
Что мне делать, если я все еще хочу сбросить имя файла, хотя имя файла было установлено на серверной стороне?
Большой двоичный объект: URL-адрес Также есть введение в атрибут download :
Хотя URL-адрес HTTP должен иметь один и тот же источник, вы можете использовать blob: URL и data: URL, чтобы пользователям было проще загружать контент, созданный с помощью JavaScript (например, фотографии, созданные с помощью веб-приложения для рисования в Интернете).
Blob (большой двоичный объект) — это большой двоичный объект. Нам это известно. Некоторые базы данных используют Blob для представления типа поля, в котором хранятся двоичные файлы. Интерфейс File также основан на Blob, наследуя функции Blob и расширяя его для поддержки файлов в пользовательской системе. Объекты Blob создаются с помощью конструктора Blob:
Blob(blobParts[, параметры])
var debug = {hello: world};var blob = new Blob([JSON.stringify(debug, null, 2)], {type: 'application/json'}); Если вам нужно загрузить простые текстовые или строковые файлы JS, вы можете преобразовать текстовую информацию в двоичный поток больших двоичных объектов, сгенерировать URL-адрес большого двоичного объекта и использовать атрибут download для завершения загрузки. Код выглядит следующим образом.
const downloadText = (text, filename = '') { const a = document.createElement('a') a.download = имя файла const blob = new Blob([text], {type: 'text/plain'}) // text относится к текстовому или строковому содержимому, которое необходимо загрузить a.href = window.URL.createObjectURL(blob) // Будет создана строка URL-адреса, похожая на blob: http://localhost:8080/d3958f5c-0777-0845-9dcf-2cb28783acaf document.body.appendChild(a) a.click() a.remove()}В чем разница между этим URL-адресом Blob и общим URL-адресом HTTP?
URL-адрес Blob/URL-адрес объекта — это псевдопротокол, который позволяет использовать объекты Blob и File в качестве источников URL-адресов, таких как изображения и ссылки для загрузки двоичных данных.
Браузер создает специальную ссылку на объект Blob или File внутри с помощью URL.createObjectURL() . Сгенерированный URL-адрес Blob можно использовать только в одном экземпляре браузера и в одном сеансе, и этот объект URL будет использоваться при страница закрывается. Выпускается браузером.
Таким образом, URL-адрес большого двоичного объекта не может указывать на ресурс сервера , и вы не можете открыть его на других страницах. В то же время из-за различий в форматах кодирования URL-адреса Blob занимают меньше ресурсов и работают лучше, чем URL-адреса данных.
Большие двоичные объекты предоставляют очень полезную функцию для веб-разработки: создание URL-адресов больших двоичных объектов. Инкапсулируйте двоичные данные в объект Blob, а затем используйте URL.createObjectURL() для создания URL-адреса Blob. Поскольку URL-адрес Blob сам по себе является URL-адресом того же происхождения, вы можете использовать этот URL-адрес при download , чтобы решить проблему загрузки и именования. междоменные ресурсы.
Blob и Fetch могут решить проблему междоменного именования и именования файлов: используйте fetch для получения междоменных ресурсов, возвращайте объект BLOB-объекта и генерируйте URL-адрес BLOB-объекта, а также используйте атрибут download тега <a> для запуска загрузки. Код выглядит следующим образом:
function download(href, filename = '') { const a = document.createElement('a') a.download = имя файла a.href = href document.body.appendChild(a) a.click() a.remove() } function downloadFile(url, filename='') { fetch(url, { headers: new Headers({ Origin: location.origin, }), mode: 'cors', }) .then(res => res.blob()) .then(blob => { const blobUrl = window.URL.createObjectURL(blob) download(blobUrl, filename) window.URL.revokeObjectURL(blobUrl) })}На этом этапе снова нажмите «Загрузить», и междоменные изображения можно будет загрузить в локальную область в обычном режиме.
Следует отметить, что сервер, на котором расположены междоменные ресурсы, должен быть настроен с использованием информации Access-Control-Allow-Origin , в противном случае вы получите междоменную ошибку в верхнем регистре. Пример конфигурации заголовка:
//Разрешить любому доменному имени доступ к заголовку('Access-Control-Allow-Origin: *'); //Укажите имя домена для доступа к заголовку('Access-Control-Allow-Origin: https://h5.ele.me ');У этого метода все еще есть некоторые недостатки. Например, браузер ограничит размер данных Blob не более чем 500 МБ, и это также будет недостаточно с точки зрения производительности.
Подвести итог В настоящее время во внешнем интерфейсе существует множество методов загрузки, и загрузка атрибута download является одним из самых простых. Однако внимательное рассмотрение некоторых из этих функций также может дать много полезной информации. download тесно связана с функциями браузера. В настоящее время совместимость этого атрибута также является большой проблемой. Однако даже представители Microsoft умоляют пользователей больше не использовать IE. Я считаю, что проблема совместимости download будет продолжать улучшаться. будущее, и перспективы применения будут становиться все более и более популярными.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.