Сохранить документ, сгенерированный javascript

Javascript может манипулировать документом, отображаемым браузером, поэтому следующее:

<script>
    document.write("<table><tr><td>Hola</td><td>Adios</td></tr></table>");
</script>

Будет отображаться таблица браузера так же, как если бы это был исходный HTML-документ:

<table>
    <tr>
        <td>Hola</td>
        <td>Adios</td>
    </tr>
</table>

Есть ли способ сохранить/обслуживать этот документ?

В настоящее время у нас есть несколько хорошо сгенерированных отчетов с использованием Ext-js, что я хотел бы сделать, это иметь его версию "text/html" (я имею в виду что-то, что не требует javascript)

Итак, в конце страницы я бы добавил кнопку: "Сохранить как blaba", и документ должен отобразить текстовую/обычную версию.

Единственный способ, который я мог сейчас подумать, - записать содержимое в переменную javascript, например:

 var content = document.toString(); // or something magic like that.
 // post it to the server

Затем опубликуйте это значение на сервере и приведите сервер к этому значению.

 <%=request.getParameter("content-text")%>

Но выглядит очень сложно.

Есть ли альтернатива?

ИЗМЕНИТЬ

Хорошо, я почти понял это. Теперь мне просто нужно открыть новое окно, чтобы опция "бы вы хотели сохранить ее показывает"

Вот что я до сих пор

<script>
    document.write("<div id='content'><table><tr><td>Hola</td><td>Adios</td></tr></table></div>");
    function saveAs(){
        var sMarkup =  document.getElementById('content').innerHTML; 
        var oNewDoc = document.open('application/vnd.ms-excel');        
        oNewDoc.write( sMarkup + "<hr>" );
        oNewDoc.close();
    }
</script>

<input type="button" value="Save as" onClick="saveAs()"/>

Строка:

    var oNewDoc = document.open('application/vnd.ms-excel');

Должен указывать новый тип содержимого, но он игнорируется.

Ответы

Ответ 1

Здесь обновленная версия, чтобы открыть содержимое таблицы в формате .xls.

<head>
<script>

         document.write("<table id='targetTable'><tr><td>Hola</td><td>Adios</td></tr><tr><td>eins</td><td>zwei</td></table>"); 
        function saveAsXLS()
        {
            var xlObj = new ActiveXObject("Excel.Application");
            var xlBook = xlObj.Workbooks.Add();
            var xlSheet = xlBook.Worksheets(1);
            for (var y=0;y<targetTable.rows.length;y++) // targetTable=id of the table
            {
                for (var x=0;x<targetTable.rows(y).cells.length;x++)
                {
                    xlSheet.Cells(y+1,x+1)=targetTable.rows(y).cells(x).innerText;
                }
            }   
            xlObj.Visible=true;
            document.write("The table contents are opened in a new Excel sheet.");//Print on webpage 
        }
</script>
</head>
<body>  
<input type="button" value="Open table in Excel!" onclick="saveAsXLS()"/> 
</body>

Этот код тестируется в IE6 и использует элемент управления ActiveXObject.

  • Таблица, которую я использовал здесь, имеет порядок 2x2, и индивидуальное содержимое отображается соответственно в лист excel.
  • В отличие от версии .doc, это не сохраняет файл в клиентской системе. Он открывает приложение с содержимым таблицы, и клиент должен его сохранить.

Надеюсь, что это поможет в ответе на ур. Lemme знает, есть ли у вас какие-либо проблемы.

Мир.

Ответ 2

Если он не будет сохранен на стороне клиента с помощью File -> Save Page As..., вам нужно будет сделать именно то, что вы предлагаете, разместив $('body').html() на своем сервере и обработав его как текст.

Ответ 3

Эта ссылка, как представляется, объясняет, как решить вашу проблему.

Ответ 4

В зависимости от ваших требований к поддержке браузера вы можете использовать URI данных

Ядро для доказательства концепции (проверено в Firefox 3.5.3):

document.write("<div id='content'><table><tr><td>Hola</td><td>Adios</td></tr></table></div>");
function extract(){
  return document.getElementById('content').innerHTML; 
}
function dataURI(s){
  return 'data:application/vnd.ms-excel;base64,' + encode64(s);
}
document.write('<a href="' + dataURI(extract()) + '">open</a>');

Я вытащил base 64 encode/decode из примеров в Интернете. Осторожно: тот, который я захватил, включал кодировку URI перед кодировкой base 64, которая некоторое время меня путала.

Ответ 5

Вы приближаетесь к ответу, который я думаю. Проблема заключается в том, что < document.open(...) 'может принимать только стандартные типы mime, такие как "text/html" , "text/plain" и несколько других

И из-за этого ваш код должен быть:

<script>
    document.write("<div id='content'><table><tr><td>Hola</td><td>Adios</td></tr></table></div>");
    function saveAs(){
        var sMarkup =  document.getElementById('content').innerHTML; 
        var oNewDoc = document.open('text/html');        
        oNewDoc.write( sMarkup + "<hr>" );
        oNewDoc.close();
    }
</script>

<input type="button" value="Save as" onClick="saveAs()"/>

Надеюсь, что это поможет.

Ответ 6

$(function(){
    $('.bbutton').click(function(){
        var url='data:application/vnd.ms-excel,' + encodeURIComponent($('#tableWrap').html() )
        location.href=url
        return false
    })
})
.table{background:#ddd;border:1px solid #aaa;}
.table thead th{border-bottom:1px solid #bbb;}
.table tr td{background:#eee;border-bottom:1px solid #fff;
  border-left:1px solid #ddd;text-align:center;}
.table tr:hover td{background:#fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='tableWrap'><table style='width:98%;box-shadow:none;' class='table'>
<thead><th>id</th><th>Name</th><th>Address</th></thead>
  <tr><td>1</td><td>Jyoti Telecom Services</td><td>http://www.tsjyoti.com</td></tr>
  <tr><td>2</td><td>Recharge</td><td>http://recharge.tsjyoti.com</td></tr>
  <tr><td>3</td><td>Bhuri Bharaj</td><td>http://bhuribharaj.tsjyoti.com</td></tr>
  </table></div>

<p>Your download ready as Excel Sheet <a href='#'class='bbutton'>Click Here for download</a></p>

Ответ 7

Если это всего лишь отчет, вы можете использовать серверный JavaScript для его создания, а затем обслуживать его любым типом MIME, который вам нужен...

Ответ 8

Я не думаю, что отправка вашего html на сервер является сложным решением. Вам просто нужно запомнить ссылку для своего пользователя, чтобы загрузить этот файл. Это можно сделать с помощью традиционного POST или даже с помощью AJAX. Это зависит от того, как вы хотите, чтобы ваши пользователи взаимодействовали, если ваша страница.

Используя традиционную запись, вы можете поместить весь html-контент в атрибут значения типа ввода, скрытый на вашей странице, с именем "html_content" или что-то в этом роде, и когда пользователь нажимает кнопку "Сохранить", вы отправляете свой пользователь на другую страницу со ссылкой делает файл. Вы отправляете html на сервер, script создает файл в файловой системе с уникальным именем и возвращает ссылку для загрузки.

Используя AJAX, вам просто нужно сделать AJAX POST, передавая эту переменную, а затем ваш script возвращает ссылку для загрузки, и вы динамически помещаете ее в свой html - без перезагрузки вашей страницы, как будто это была "только клиентская сторона".

В любом случае вы вернете ссылку на ресурс, который вы только что создали в вашей файловой системе, с расширением html. Не забудьте создать уникальные имена на вашем сервере для каждого сгенерированного файла, чтобы избежать столкновений.

Помните, что при использовании innerHTML в IE 6 (я не знаю, является ли это поведение семейства IE или примерно 6-й версией), верхняя часть всех тегов и удаляет кавычки из атрибутов. Если вы планируете выполнять некоторую пост-обработку в своем html, будьте осторожны.

Я не знаю, как jQuery или другие JS-библиотеки ведут себя в таких ситуациях. Я бы предложил использовать его, хотя у них есть много проверок совместимости браузера, чтобы абстрагировать все эти хаки, которые мы используем.

Ответ 9

Здесь мой код для сохранения сгенерированного содержимого [на стороне клиента] с помощью JavaScript на локальный диск C: в формате MSWord [.doc].

<script>

    document.write("<div id='content'><table><tr><td>Holaa</td><td>Adiosa</td></tr></table></div>"); 
    function saveAs()
        {
            var wordObj=new ActiveXObject("Word.Application");
            var docText;
            var obj;
            var textToWrite = document.getElementById('content').innerHTML;
            if (wordObj != null)
            {
                wordObj.Visible = false;
                wordDoc=wordObj.Documents.Add();
                wordObj.Selection.TypeText(textToWrite);
                wordDoc.SaveAs("C:\\Eureka.doc");
                wordObj.Quit();
                document.write("The content has been written to 'C:\\Eureka.doc'");//Print on webpage 
            }
        }
</script>

<body>

<input type="button" value="Save in C:" onclick="saveAs()"/> 

</body>

Я быстро работал над проблемой ура и придумал этот фрагмент кода. Надеюсь, я правильно понял вашу проблему.

Контракты в моем коде

  • Формат файла -.doc, а не .xls.
  • Во-вторых, файл сохраняется в статическом местоположении, а не указанном пользователем месте [может быть оптимизирован].
  • И код использует ActiveX, и я не проверял работу в серверной среде.

Они должны быть рассмотрены в будущих версиях. (

Мир.

Ответ 10

Является ли ваш javascript AJAX, который извлекает содержимое document.writeln() с сервера, или вы уже генерируете этот контент, когда страница обслуживается пользователем? Потому что, если он первый, я не вижу причин, по которым вы не можете сохранять какие-либо переменные/запросы в сеансе любой используемой серверной технологии, а затем просто генерировать материал из обычного текста. В противном случае вам нужно будет предложить предложение voyager выше.

Ответ 11

Поскольку вы используете Ext JS, у вас, вероятно, есть объект Store, который предоставляет данные в сетку? Вы должны иметь возможность извлекать нужные данные, пробираясь через Магазин, а затем отформатировать его так, как вы хотите. Я не думаю, что скремблирование данных из сгенерированного HTML идеально.

Как только вы возьмете данные из сетки и отформатируете их в текст, вы можете отправить его на бэкэнд, чтобы начать загрузку (с помощью Content-Disposition: attachment и т.д.).

Если вы не занимаетесь перекрестным браузером, вы также можете использовать схему данных: URL, чтобы инициировать загрузку без привлечения бэкэнда.