Но из-за ограничений браузеров во многих случаях мы можем только предоставить ссылку и позволить пользователям щелкнуть, чтобы открыть -> Сохранить как. Например, следующая ссылка:
Скопируйте код кода следующим образом:
<a href="file.js">file.js</a>
Когда пользователь нажимает на эту ссылку, браузер открывает и отображает содержимое файла, на который указывает ссылка. Очевидно, это не соответствует нашим потребностям. HTML5 добавляет атрибут загрузки к тегу a. Пока этот атрибут присутствует, при нажатии на ссылку браузер не будет открывать файл, на который указывает ссылка, а вместо этого загрузит его (в настоящее время поддерживается только Chrome, Firefox и Chrome). Опера).
При загрузке имя ссылки будет использоваться непосредственно как имя файла, но его можно изменить. Просто добавьте нужное имя файла для загрузки, например: download="not-a-file.js".
Но этого недостаточно. Вышеописанный метод подходит для использования только тогда, когда файл находится на сервере. Что делать, если вы хотите, чтобы браузер загружал контент, созданный js, на стороне браузера?
На самом деле, я думаю, что многие люди слышали о слове DataURI, более распространенным является источник изображения, например:
Скопируйте код кода следующим образом:
<img src="data:image/gif;base64,R0lGOXXXXX">
Объяснение DataURI можно переместить сюда, здесь я его объяснять не буду.
Итак, теперь существует закон, которому следует следовать при загрузке контента, созданного с помощью js. Инкапсулировано в метод следующим образом:
Скопируйте код кода следующим образом:
функция downloadFile(aLink, fileName, content){
aLink.download = имя_файла;
aLink.href = «данные: текст/обычный» + контент;
}
После вызова downloadFile пользователь щелкает ссылку, чтобы запустить загрузку браузера.
Однако этого недостаточно. У вышеописанного метода есть два недостатка, которые приведут к потере многих ленивых девушек:
Существуют ограничения на типы файлов, которые можно загрузить. Что делать, если я хочу загрузить обработанные фотографии?
Для загрузки придется нажать еще раз, что слишком хлопотно.
Чтобы решить проблему с типом файла, вы можете использовать новый API браузера (URL.createObjectURL). URL.createObjectURL обычно используется для создания DataURI изображения для его отображения. Здесь он используется для загрузки файла. и позвольте браузеру помочь нам установить тип файла.
Параметр URL.createObjectURL — это объект File или объект Blob. Объект File — это файл, выбранный с помощью input[type=file]. Объект Blob — это большой двоичный объект. Подробное описание можно найти здесь.
Теперь нам нужно только создать ObjectURL с содержимым и назначить его aLink, чтобы решить проблему ограничения типов файлов.
Автоматическая загрузка файлов также довольно проста. Вы можете самостоятельно создать событие щелчка пользовательского интерфейса, а затем автоматически запускать его для автоматической загрузки.
Теперь давайте посмотрим на окончательный код:
Скопируйте код кода следующим образом:
функция downloadFile(имя_файла, содержимое){
var aLink = document.createElement('a');
var blob = новый Blob([содержание]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent без последних двух параметров сообщит об ошибке в FF. Спасибо Баррету Ли за отзыв.
aLink.download = имя_файла;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
Теперь при вызове downloadFile файл будет автоматически скачан, не правда ли, ^_^?
Примечание. В настоящее время (2014-01) Blob и URL.createObjectURL больше не нужно добавлять частные префиксы в стандартных браузерах, поэтому вы можете использовать их с уверенностью~~ Если вы беспокоитесь, вы можете проверить «Могу ли я использовать».