Содержание
Создать и скачать файл с помощью Javascript? Если вы думаете об этом, это не так безопасно, как вы думаете, и не должно быть разрешено без взаимодействия с пользователем (однако теперь это разрешено).
Представьте, что вы используете Google Chrome и включили опцию «Автоматически открывать загруженные файлы», и, если вам не повезло, вы входите на вредоносный веб-сайт, и он генерирует загрузку неизвестного файла. Вы знаете, как заканчивается эта история.
Тем не менее, в последних браузерах блокируются неизвестные или редко загружаемые расширения файлов, и появляется сообщение, если вы действительно хотите открыть этот файл (по крайней мере, в Chrome).
Поэтому в последние годы автоматическую загрузку файлов было трудно достичь, но теперь, с появлением HTML5, эту задачу стало легче выполнять.
В этой статье мы покажем вам несколько хитростей для генерации и загрузки непосредственно файла с использованием чистого Javascript.
Самостоятельная функция загрузки
Следующая простая функция позволяет вам сгенерировать загрузку файла прямо в браузере, не связываясь с каким-либо сервером. Он работает во всех браузерах HTML5 Ready, так как использует атрибут загрузки элемент:
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
// Start file download.
download("hello.txt","This is the content of my file :)");
Атрибут загрузки указывает, что цель будет загружена, когда пользователь нажимает гиперссылку. Этот атрибут используется только если установлен атрибут href.
Вы можете увидеть этот фрагмент в действии в следующей скрипке:
Использование библиотеки
Создавайте библиотеки, а не войны. FileSaver.js реализует saveAs() Интерфейс FileSaver в браузерах, которые изначально не поддерживают его.
Если вам нужно сохранить действительно большие файлы, размер которых превышает ограничение размера BLOB-объекта или недостаточно оперативной памяти, взгляните на более продвинутый StreamSaver.js это может сохранять данные непосредственно на жесткий диск асинхронно с мощью нового API потоков. Это будет иметь поддержку для прогресса, отмены и знания, когда он закончил писать.
Следующий фрагмент позволяет вам сгенерировать файл (с любым расширением) и загрузить его без контакта с каким-либо сервером:
var content = "What's up , hello world";
// any kind of extension (.txt,.cpp,.cs,.bat)
var filename = "hello.txt";
var blob = new Blob([content], {
type: "text/plain;charset=utf-8"
});
saveAs(blob, filename);В следующей таблице показана совместимость FileSaver.js в разных браузерах:
| Firefox 20+ | капля | да | 800 МиБ | Никто |
| Fire Fox < 20 | данные: URI | нет | н / | Blob.js |
| Хром | капля | да | 500 МиБ | Никто |
| Chrome для Android | капля | да | 500 МиБ | Никто |
| край | капля | да | ? | Никто |
| IE 10+ | капля | да | 600 МиБ | Никто |
| Опера 15+ | капля | да | 500 МиБ | Никто |
| опера < 15 | данные: URI | нет | н / | Blob.js |
| Safari 6.1 + * | капля | нет | ? | Никто |
| Сафари < 6 | данные: URI | нет | н / | Blob.js |
Примечание: хотя он поддерживает самые последние браузеры, есть несколько хитростей, которые необходимо знать, чтобы обеспечить полную поддержку.
IE < 10
Можно сохранить текстовые файлы в IE < 10 without Flash-based polyfills. See ЧенВенБрайан и Коффсируп saveTextAs() Больше подробностей.
Safari 6.1+
Иногда могут быть открыты большие двоичные объекты, а не сохранены — вам может потребоваться, чтобы пользователи Safari вручную нажимали? + S, чтобы сохранить файл после его открытия. С использованием application/octet-stream MIME-тип для принудительной загрузки может вызвать проблемы в Safari.
IOS
saveAs должны быть запущены в событии взаимодействия с пользователем, таком как onTouchDown или onClick; setTimeout предотвратит срабатывание saveAs. Из-за ограничений в iOS saveAs открывается в новом окне вместо загрузки, если вы хотите это исправить, пожалуйста скажи Apple как эта ошибка влияет на вас.
Повеселись !
