Как сохранить файл js
Обновлено: 06.07.2024
У меня есть данные, которые я хочу записать в файл, и откройте диалоговое окно файла, чтобы пользователь мог выбрать, где сохранить файл. Было бы здорово, если бы он работал во всех браузерах, но он должен работать в Chrome. Я хочу сделать это на стороне клиента.
В принципе, я хочу знать, что положить в эту функцию:
Если функция принимает данные, пользователь выбирает местоположение для сохранения файла и создает файл в этом месте с этими данными.
Использование HTML тоже хорошо, если это помогает.
Очень незначительное улучшение кода Awesomeness01 (нет необходимости в привязном теге) с добавлением, предложенным trueimage (поддержка IE):
Протестировано для правильной работы в Chrome, FireFox и IE10.
В Safari данные будут открываться на новой вкладке, и вам придется вручную сохранить этот файл.
Этот проект на github выглядит многообещающим:
FileSaver.js реализует интерфейс FileSaver W3C saveAs() в браузеров, которые не поддерживают его.
Также посмотрите здесь демо:
И вы затем загрузите файл, поместив атрибут загрузки в тег привязки.
Причина, по которой мне это лучше, чем создание URL-адреса данных, заключается в том, что вам не нужно делать большой длинный URL-адрес, вы можете просто создать временный URL-адрес.
Выбор местоположения для сохранения файла перед его созданием невозможен. Но возможно, по крайней мере в Chrome, генерировать файлы, используя только JavaScript. Вот старый пример создания CSV файла. Пользователю будет предложено загрузить его. Это, к сожалению, плохо работает в других браузерах, особенно в IE.
Для последнего браузера, такого как Chrome, вы можете использовать File API, как в этом уроке:
Попробуйте использовать это, он загрузит файл, и все, что вам нужно сделать, это отредактировать атрибуты onclick.
Пробовал это в консоли, и он работает.
Вы не можете сделать это исключительно в Javascript. Javascript, работающий в браузерах, еще не имеет разрешения (были предложения) из-за соображений безопасности.
Вместо этого я бы рекомендовал использовать Downloadify:
Небольшая библиотека javascript + Flash, которая позволяет создавать и загружать текстовые файлы без взаимодействия с сервером.
Для Chrome и Firefox я использую метод исключительно JavaScript.
(Мое приложение не может использовать такой пакет, как Blob.js , потому что он обслуживается специальным движком: DSP с сервером WWW, набитым и маленьким для чего-либо вообще.)
Примечания, оговорки и ласковые слова:
StreamSaver - это альтернатива для сохранения очень больших файлов без необходимости хранить все данные в памяти.
Фактически он эмулирует все, что требует сервер при сохранении файла, но всю клиентскую часть с обслуживающим работником.
Вы можете либо получить программу записи и вручную записать в нее Uint8Array, либо передать двоичный файл readableStream в поток записи
Существует несколько примеров демонстрации:
- Как сохранить несколько файлов в формате ZIP
- передача readableStream, например, из Response или blob.stream() в StreamSaver
- запись вручную в поток записи при вводе чего-либо
- или перекодировать видео/аудио
Вот пример в простейшем виде:
Если вы хотите сохранить большой двоичный объект, просто преобразуйте его в readableStream
Мнение о том, что JavaScript не умеет взаимодействовать с файловой системой, является не совсем верным. Скорее, речь идет о том, что это взаимодействие существенно ограничено по сравнению с серверными языками программирования, такими как Node.js или PHP. Тем не менее, JavaScript умеет как получать (принимать), так и создавать некоторые типы файлов и успешно обрабатывать их нативными средствами.
В этой статье мы создадим три небольших проекта:
- Реализуем получение и обработку изображений, аудио, видео и текста в формате txt и pdf
- Создадим генератор JSON-файлов
- Напишем две программы: одна будет формировать вопросы (в формате JSON), а другая использовать их для создания теста
Получаем и обрабатываем файлы
Для начала создадим директорию, в которой будут храниться наши проекты. Назовем ее «Work-With-Files-in-JavaScript» или как Вам будет угодно.
В этой директории создадим папку для первого проекта. Назовем ее «File-Reader».
Создаем в ней файл «index.html» следующего содержания:
Здесь мы имеем контейнер-файлоприемник и инпут с типом «file» (для получения файла; мы будем работать с одиночными файлами; для получения нескольких файлов инпуту следует добавить атрибут «multiple»), который будет спрятан под контейнером.
Стили можно подключить отдельным файлом или в теге «style» внутри head:
Можете сделать дизайн по своему вкусу.
Не забываем подключить скрипт либо в head с атрибутом «defer» (нам нужно дождаться отрисовки (рендеринга) DOM; можно, конечно, сделать это в скрипте через обработку события «load» или «DOMContentLoaded» объекта «window», но defer намного короче), либо перед закрывающим тегом «body» (тогда не нужен ни атрибут, ни обработчик). Лично я предпочитаю первый вариант.
Откроем index.html в браузере:
Прежде чем переходить к написанию скрипта, следует подготовить файлы для приложения: нам потребуется изображение, аудио, видео, текст в формате txt, pdf и любом другом, например, doc. Можете использовать мою коллекцию или собрать свою.
Нам часто придется обращаться к объектам «document» и «document.body», а также несколько раз выводить результаты в консоль, поэтому предлагаю обернуть наш код в такое IIFE (это не обязательно):
Первым делом объявляем переменные для файлоприемника, инпута и файла (последний не инициализируем, поскольку его значение зависит от способа передачи — через клик по инпуту или бросание (drop) в файлоприемник):
Отключаем обработку событий «dragover» и «drop» браузером:
Для того, чтобы понять, зачем мы это сделали, попробуйте перенести изображение или другой файл в браузер и посмотрите, что произойдет. А происходит автоматическая обработка файлов, т.е. то, что мы собираемся реализовать самостоятельно в познавательных целях.
Обрабатываем бросание файла в файлоприемник:
Мы только что реализовали простейший механизм «dran'n'drop».
Обрабатываем клик по файлоприемнику (делегируем клик инпуту):
Приступаем к обработке файла:
Удаляем файлоприемник и инпут:
Способ обработки файла зависит от его типа:
Мы не будем работать с html, css и js-файлами, поэтому запрещаем их обработку:
Мы также не будем работать с MS-файлами (имеющими MIME-тип «application/msword», «application/vnd.ms-excel» и т.д.), поскольку их невозможно обработать нативными средствами. Все способы обработки таких файлов, предлагаемые на StackOverflow и других ресурсах, сводятся либо к конвертации в другие форматы с помощью различных библиотек, либо к использованию viewer'ов от Google и Microsoft, которые не хотят работать с файловой системой и localhost. Вместе с тем, тип pdf-файлов также начинается с «application», поэтому такие файлы мы будем обрабатывать отдельно:
Для остальных файлов получаем их «групповой» тип:
Посредством switch..case определяем конкретную функцию обработки файла:
в последнее время я возился с WebGL, и у меня работает читатель Collada. Проблема в том, что это довольно медленно (Collada-очень подробный формат), поэтому я собираюсь начать конвертировать файлы в более простой в использовании формат (возможно, JSON). Дело в том, что у меня уже есть код для анализа файла в Javascript, поэтому я могу также использовать его как своего экспортера! Проблема в экономии.
и для ясности: я не пытаюсь получить доступ к файловой системе без ведома пользователя! Пользователь предоставит файл (возможно, с помощью перетаскивания), скрипт будет преобразуйте файл в память, и пользователю будет предложено загрузить результат. Все из которых должны быть "безопасными" действиями, насколько это касается браузера.
[EDIT]: Я не упоминал об этом заранее, поэтому плакаты, которые ответили "Flash", достаточно действительны, но часть того, что я делаю, - это попытка подчеркнуть, что можно сделать с помощью чистого HTML5. так что Flash прямо в моем случае. (Хотя это совершенно правильный ответ для тех, кто делает "настоящий" веб-приложение.), Что похоже, мне не повезло, если я не хочу привлекать сервер. Все равно спасибо!
OK, создание данных: URI определенно делает трюк для меня, благодаря Мэтью и Деннкстеру, указывающим на этот вариант! Вот в основном, как я это делаю:
1) получите все содержимое в строку под названием "содержимое" (например, создав его там изначально или прочитав innerHTML тега уже построенной страницы).
2) Создайте URI данных:
будут ограничения длины в зависимости от типа браузера и т. д., но, например, Firefox 3.6.12 работает до минимум 256 тысяч. Кодирование в Base64 вместо использования encodeURIComponent может сделать вещи более эффективными, но для меня это было нормально.
3) откройте новое окно и" перенаправьте " его на этот URI запрашивает местоположение загрузки моей сгенерированной страницы JavaScript:
простое решение для HTML5 готовых браузеров.
использование
в HTML5 определен window.saveAs(blob, filename) метод. Сейчас он не поддерживается ни одним браузером. Но есть библиотека совместимости под названием FileSaver.js это добавляет эту функцию в большинство современных браузеров (включая Internet Explorer 10+). Internet Explorer 10 поддерживает navigator.msSaveBlob(blob, filename) метод (MSDN), который используется в FileSaver.js для поддержки Internet Explorer.
Я написал блоге С более подробной информацией об этой проблеме.
сохранение больших файлов
длинные URIs данных могут дать проблемы с производительностью в браузерах. Другой вариант сохранения сгенерированных файлов на стороне клиента-поместить их содержимое в объект Blob (или File) и создать ссылку для загрузки с помощью URL.createObjectURL(blob) . Это возвращает URL-адрес, который можно использовать для извлечения содержимого blob. Blob хранится внутри браузера до тех пор, пока либо URL.revokeObjectURL() вызывается по URL-адресу или документ, который его создал, закрывается. Большинство веб-браузеров поддержка URL-адресов объектов, Opera Mini-единственный, который их не поддерживает.
принудительная загрузка
если данные текст или изображение, браузер может открыть файл, вместо сохранения его на диск. Чтобы вызвать загрузку файла при нажатии на ссылку, вы можете использовать . Однако, не все веб-браузеры имеют поддержка атрибута загрузки. Другой вариант-использовать application/octet-stream как mime-тип файла, но это приводит к тому, что файл представляется как двоичный blob, который особенно недружелюбен Пользователю, если вы не можете указать имя файла. См. также ' Force, чтобы открыть " Сохранить как. "всплывающее окно открыто по текстовой ссылке нажмите для pdf в HTML'.
указание имени
если blob создается с помощью конструктора файлов, вы также можете установить имя файла, но только несколько веб-браузеров (включая Chrome и Firefox) имеют поддержка конструктора файлов. Имя файла также может быть указан в качестве аргумента download атрибут, но это подлежит тонне соображений безопасности. Internet Explorer 10 и 11 предоставляет свой собственный метод,msSaveBlob, чтобы указать имя файла.
Извините за такой вопрос, просто уж не знаю у кого ещё спросить. Подскажите пожалуйста как сохранить скрипт в формате .js ?
Раньше мне помогал мой друг, но сейчас он не в сети уже неделю, а решение проблемы нужно срочно.
Может программа нужна какая нибудь для этого ?
Последний раз редактировалось: Кардинал Мишель Картер (Апрель 18th 2013, 13:16), всего редактировалось 1 раз(а)
Сказочник Зазеркалья
Тип файла: все файлы
Имя файла: название.js
Где искать основные шаблоны ?
ПА > Оформление > Шаблоны > Общие настройки
Dana Domirani Админист ратор
Тип файла: все файлы
Имя файла: название.js *о* Дана ты просто чудо!
А я то думала нужно через проги или что то подобное делать.
Ну тогда пойду парочку скриптов попробую сделать.
Думаю что темку можно закрывать.
Сказочник Зазеркалья
-Expert-Editor-4.3-Rus
Домовой
Читайте также: