Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2017, 17:54
Аспирант
Отправить личное сообщение для sergey24 Посмотреть профиль Найти все сообщения от sergey24
 
Регистрация: 04.11.2016
Сообщений: 56

Требуется сохранить содержимое блока в файл и скачать
Добрый день уважаемые форумчане. Перейду сразу к делу.
Есть блок:
<div class="block">123</div>
И кнопка <button class="save">Сохранить</button>
Как сделать так, чтобы после нажатия на кнопку скачивался txt файл с содержимым блока block, в данном случае должен скачаться файл со следующим текстом внутри "123".
Ответить с цитированием
  #2 (permalink)  
Старый 12.01.2017, 20:38
Аспирант
Отправить личное сообщение для sergey24 Посмотреть профиль Найти все сообщения от sergey24
 
Регистрация: 04.11.2016
Сообщений: 56

Нашёл решение, но оно работает с textarea только. Как сделать, чтобы данные брались из дива?
Index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <title>Generating files with JS & PHP | Tutorialzine Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <header>
            <h1>Generating Files with JavaScript</h1>
            <h2><a href="http://tutorialzine.com/2011/05/generating-files-javascript-php/">« Read and download on Tutorialzine</a></h2>
        </header>

        <form action="./" method="post">
            <textarea></textarea>
            <a href="#" class="blueButton" id="download">Download</a>
        </form>

        <footer>Another cool example: <a href="#" id="downloadPage">download this page.</a> <b>To download the source code, visit <a href="http://tutorialzine.com/2011/05/generating-files-javascript-php/">Tutorialzine.com</a></b></footer>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
        <script src="assets/js/jquery.generateFile.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

download.php
if(empty($_POST['filename']) || empty($_POST['content'])){
    exit;
}

$filename = preg_replace('/[^a-z0-9\-\_\.]/i','',$_POST['filename']);

header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');

echo $_POST['content'];

assets/jquery.generateFile.js
(function($){

    $.generateFile = function(options){

        options = options || {};

        if(!options.script || !options.filename || !options.content){
            throw new Error("Please enter all the required config options!");
        }

        var iframe = $('<iframe>',{
            width:1,
            height:1,
            frameborder:0,
            css:{
                display:'none'
            }
        }).appendTo('body');

        var formHTML = '<form action="" method="post">'+
            '<input type="hidden" name="filename" />'+
            '<input type="hidden" name="content" />'+
            '</form>';

        setTimeout(function(){


            var body = (iframe.prop('contentDocument') !== undefined) ?
                            iframe.prop('contentDocument').body :
                            iframe.prop('document').body;   
            body = $(body);

            body.html(formHTML);

            var form = body.find('form');

            form.attr('action',options.script);
            form.find('input[name=filename]').val(options.filename);
            form.find('input[name=content]').val(options.content);

            form.submit();
        },50);
    };

})(jQuery);

assets/script.js
$(document).ready(function(){

    $('#download').click(function(e){

        $.generateFile({
            filename    : 'export.txt',
            content     : $('textarea').val(),
            script      : 'download.php'
        });

        e.preventDefault();
    });

    $('#downloadPage').click(function(e){

        $.generateFile({
            filename    : 'page.html',
            content     : $('html').html(),
            script      : 'download.php'
        });

        e.preventDefault();
    });

});
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2017, 20:57
Аспирант
Отправить личное сообщение для fuckingquest Посмотреть профиль Найти все сообщения от fuckingquest
 
Регистрация: 28.10.2016
Сообщений: 70

<div id = "content">123</div>
<button id = "b">сoхранить</button>

<script>

a = document.createElement("a")
a.setAttribute("href", "data:text/plain," + content.innerHTML)
a.setAttribute("download", "filename.txt")

b.onclick = function(){ a.click() }





</script>
Ответить с цитированием
  #4 (permalink)  
Старый 12.01.2017, 21:00
Аспирант
Отправить личное сообщение для sergey24 Посмотреть профиль Найти все сообщения от sergey24
 
Регистрация: 04.11.2016
Сообщений: 56

Спасибо большое
Ответить с цитированием
  #5 (permalink)  
Старый 13.01.2017, 07:49
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от sergey24
Generating files with JS & PHP
А использовать нормальный редактор?
Ответить с цитированием
  #6 (permalink)  
Старый 13.01.2017, 13:22
Интересующийся
Отправить личное сообщение для andyyy Посмотреть профиль Найти все сообщения от andyyy
 
Регистрация: 09.01.2017
Сообщений: 10

А не легче просто <a href='ваш файл'>123</a>))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно сохранить загруженный файл? 2chan Node.JS 10 03.04.2016 23:11
Как переместить содержимое блока в другой блок? Vladislav Общие вопросы Javascript 7 06.12.2015 17:22
Определить содержимое блока Onix13 jQuery 4 16.02.2015 22:44
Как скачать файл через JS? Dimaz Events/DOM/Window 9 20.07.2014 22:20
drag-and-drop и position:fixed dotwatt Элементы интерфейса 5 05.12.2012 08:44