Как сделать файл js
Обновлено: 01.07.2024
Создать и скачать файл с помощью Javascript? Если вы думаете об этом, это не так безопасно, как вы думаете, и не должно быть разрешено без взаимодействия с пользователем (однако теперь это разрешено).
Поэтому в последние годы автоматическую загрузку файлов было трудно достичь, но теперь, с появлением HTML5, эту задачу стало легче выполнять.
В этой статье мы покажем вам несколько хитростей для генерации и загрузки непосредственно файла с использованием чистого Javascript.
Самостоятельная функция загрузки
Следующая простая функция позволяет вам сгенерировать загрузку файла прямо в браузере, не связываясь с каким-либо сервером. Он работает во всех браузерах HTML5 Ready, так как использует атрибут загрузки элемент:
Атрибут загрузки указывает, что цель будет загружена, когда пользователь нажимает гиперссылку. Этот атрибут используется только если установлен атрибут href.
Вы можете увидеть этот фрагмент в действии в следующей скрипке:
Использование библиотеки
Создавайте библиотеки, а не войны. FileSaver.js реализует saveAs() Интерфейс FileSaver в браузерах, которые изначально не поддерживают его.
Если вам нужно сохранить действительно большие файлы, размер которых превышает ограничение размера BLOB-объекта или недостаточно оперативной памяти, взгляните на более продвинутый StreamSaver.js это может сохранять данные непосредственно на жесткий диск асинхронно с мощью нового API потоков. Это будет иметь поддержку для прогресса, отмены и знания, когда он закончил писать.
Следующий фрагмент позволяет вам сгенерировать файл (с любым расширением) и загрузить его без контакта с каким-либо сервером:
В следующей таблице показана совместимость FileSaver.js в разных браузерах:
Safari 6.1+
Иногда могут быть открыты большие двоичные объекты, а не сохранены — вам может потребоваться, чтобы пользователи Safari вручную нажимали? + S, чтобы сохранить файл после его открытия. С использованием application/octet-stream MIME-тип для принудительной загрузки может вызвать проблемы в Safari.
В современном мире верстальщику, который не знает хотя бы основ JavaScript, будет очень сложно. Совершенно не обязательно быть гуру JavaScript, но основами данного языка владеть необходимо.
JavaScript — клиентский язык программирования (выполняется не на сервере, а непосредственно в браузере пользователя на его локальном компьютере).
JavaScript используется для создания веб-приложений и динамических сайтов способных взаимодействовать с пользователем. В этом уроке вы получите лишь общее представление об этом мощном инструменте веб-дизайна, т.к. изучение JavaScript не входит в начальный курс обучения HTML.
Прежде всего нужно запомнить, что JavaScript является регистрозависимым языком. По этой причине следует запоминать не только названия свойств, методов или ключевых слов JavaScript, но и заглавными или строчными буквами они пишутся.
Код JavaScript может быть написан либо непосредственно в самом HTML-документе, либо в отдельном файле.
Для записи JavaScript-кода в HTML-документе используется тег
Пример HTML:
Запуск скрипта
Часто при разработке веб приложения возникает необходимость отдавать файл пользователю на скачку. Содержание такого файла может быть совершенно разным, начиная от конфигурационных данных, заканчивая отчётами, статистической информацией, которая генерируется автоматически.
Для организации подобной системы нужно написать скрипт, который сделает выборку из базы данных, запишет полученные результаты в файл и даст его на скачку пользователю. В этом уроке, мы продемонстрируем новый подход к этой задаче.
Мы создадим специальный jQuery плагин, который в сочетании с php скриптом, сможет сгенерировать текстовый файл, и отдаст его в распоряжение пользователя. Инициализация скачки будет происходить через JavaScript.
Начнём работу с написания простого HTML кода, который будет содержать текстовое поле и кнопку.
index.html
В этом примере мы используем doctype HTML5 для того, чтобы иметь возможность пользоваться новыми технологиями. Для того чтобы всё работало и в IE, нам необходимо подключить специальный HTML5 скрипт.
В самом конце файла мы добавим подключение к jQuery, плагин generateFile, который напишем чуть позже и script.js откуда будет вестись управление программой.
Вообще говоря в JavaScript нет встроенной возможности генерации файлов. Однако существуют различные подходы для решения этой задачи (одно из них использование технологии Flash), но в нашем случае мы будем использовать PHP скрипт.
download.php
В этом PHP скрипте мы создаём имя файла и генерируем необходимые нам заголовки. Плагин, который мы напишем, будет передавать параметры через POST запрос: filename и content. Скрипт будет считывать полученные данные, после чего создаст заголовки и отдаст сформированный файл на скачку.
jQuery
Как вы уже поняли, наш плагин делает POST запрос к файлу download.php. Для передачи данных мы могли бы использовать AJAX, но не на этот раз.
В нашем примере мы будем генерировать скрытый iframe, куда будем записывать данные из формы, а потом отправлять их через POST запрос.
Давайте, наконец, приступим:
assets/jquery.generateFile.js
Обратите внимание на функцию setTimeout(). Без неё мы не сможем воспользоваться iframe в Internet Explorer. В нашем случае мы немного тянем время для того, чтобы DOM сформировался до конца.
А вот и применение нашего плагина:
assets/script.js
При вызове $.generateFile, вам необходимо передать имя файла и текст файлу download.php.
Вывод
Подобным образом можно создать генерацию doc файлов или файлов других форматов, основанных на Microsoft Office XML. Надеюсь, урок был для вас полезен.
5 последних уроков рубрики "PHP"
Фильтрация данных с помощью zend-filter
Когда речь идёт о безопасности веб-сайта, то фраза "фильтруйте всё, экранируйте всё" всегда будет актуальна. Сегодня поговорим о фильтрации данных.
Контекстное экранирование с помощью zend-escaper
Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.
Подключение Zend модулей к Expressive
Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.
Совет: отправка информации в Google Analytics через API
Подборка PHP песочниц
Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.
В качестве аргумента alert() можно указать не только конкретный текст, но и результат каких-либо вычислений или обработки других данных. Например, alert(x), где x вычисляется отдельно.
confirm()
Синтаксис такой же, только здесь логически предполагается выбор, так что пользователю задают вопрос.
prompt()
Синтаксис здесь такой:
Значение поля ввода необязательно. Туда можно вписать текст, который изначально введен в поле для удобства пользователя.
Возможности современного JavaScript выходят далеко за рамки примитивного ввода-вывода данных через формы. Эти методы мы привели только в качестве самых простых примеров. Кроме этого, JavaScript позволяет реагировать на действия пользователя. Например, на движения мышкой или нажатие определенных клавиш. JavaScript часто используется для обеспечения асинхронной работы (Технология AJAX), когда информация на странице обновляется без ее перезагрузки. В этом режиме данные отправляются на сервер и загружаются оттуда в интерактивном режиме. Кроме того, JavaScript способен манипулировать с HTML-элементами на странице (создавать и прятать теги и т.д.) и делать многое другое.
Полезные инструменты
Консоль разработчика
Во всех популярных браузерах есть специальная консоль разработчика. Она показывает код скриптов на странице, а также выводит другую полезную информацию. В Chrome, Firefox и IE консоль разработчика открывается по нажатию горячей клавиши F12, в Safari — Ctrl+Shift+I или Ctrl+Alt+C. На скриншоте скрипты отображаются справа вверху, вместе с другими элементами веб-страницы.
Редакторы кода
В дальнейшем для удобного программирования понадобится установить редактор кода или IDE (Integrated Development Environment), интегрированную среду разработки. IDE — это редактор с расширенной функциональностью, который интегрирован с другими полезными инструментами, поддерживает подключение дополнительных модулей и так далее.
Для начала можно рекомендовать один из легких редакторов:
В будущем есть смысл присмотреться к IDE:
Заключение
Анатолий Ализар
Читайте также: