Red Spirit

Блог Алексея Таянчина

RSS 2.0

HTML5 сохранение файла любого типа с произвольным именем

Проблема

Делал я тут браузерный редактор спрайтов для последующего применения в 2D играх и столкнулся с проблемой. Мне надо было сохранить в файл картинку, которая была нарисована в canvas-е. То есть просто по нажатию на кнопке появлялся диалог с сохранением файла и я его сохранял. Такое можно легко сделать через вебсервер который отдает нужные заголовки и всякими скрытыми фреймами, но нужно было сделать приложение без PHP, только на клиентской стороне. Как?

Решение

Теория:
В принципе, до недавнего времени сделать такое было невозможно, однако, с приходом HTML5 у нас появляется больше возможностей. Уже сейчас все новые браузеры знают, что у ссылки (тэг A) может быть атрибут download, который задает имя файла. Если кликнуть на такую ссылку, то браузер предложит сохранить клиенту тот контент, на который ведет ссылка. Собственно все.

Практика:
Сразу предлагаю JS функцию, которая позволяет на клиентской стороне сохранить любой контент, текстовый или бинарный.

Использование:

И не отходя от кассы – ДЕМО
Функция file-saver.js (включает в себя функцию кодирования BASE64)

  • http://plutov.by/ plutov.by

    Еще статьи на тему HTML5: http://plutov.by/category/html5

  • nita

    Здравствуйте!
    Понимаю, что мой вопрос запоздал года на 2, но все же буду благодарна, если Вы поможете. При создании файла, описанным Вами способом, в сохраненном тексте отсутствуют переносы на другую строку, т.е. весь текст записывается одной строкой. Не подскажите, как это можно исправить?