12

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, что я хотел бы сделать, это есть версия «текст/html» его (я имею в виду, то, что не требует JavaScript)

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

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

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

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

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

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

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

EDIT

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

Это то, что я получил до сих пор

<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');   

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

ответ

4

Вот обновленная версия, чтобы открыть содержимое таблицы в формате .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, это не сохраняет файл в системе клиента. Он открывает приложение с содержимым таблицы, и клиент должен его сохранить.

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

Мир.

+0

Это выглядит очень многообещающим. Я пробовал в ie7, и я получаю следующую ошибку. Я попробую его с помощью ie6 (моя цель) через некоторое время и приведу вам результат: http://img11.imageshack.us/img11/8444/capturatx.png Сообщение об ошибке: * Сервер распыления не смог создать объект * – OscarRyz

+0

Этот код отлично работает, если он запущен локально [без серверной среды]. Чтобы он работал в среде «server», вам необходимо изменить некоторые параметры безопасности, чтобы создать ActiveXObject в системе ur-сервера. Хит-инструменты> Свойства обозревателя> Вкладка «Безопасность»> «Пользовательский уровень»> убедитесь, что выбрано «приглашение» для «Загрузка подписанных и неподписанных элементов управления ActiveX». Затем вы получите приглашение при запуске кода. Если это не помогло, попробуйте изменить другие соответствующие параметры activeX. Но убедитесь, что у вас есть обновленная антивирусная программа b4, изменяющая параметры безопасности, если в случае чего-то странного. : p – chong

+0

Я запустил это как локальный файл html, см. изображение: http://img11.imageshack.us/img11/8444/capturatx.png – OscarRyz

7

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

+0

Файл-Сохранить страницу как: спасут «document.write ('HTML ... и т.д. и т.п.) не я хотел бы что-то вроде? "Файл-Сохранить как" и сохранение, которое было бы «

OscarRyz

+0

@Oscar Reyes: вы можете создать кнопку, которая откроет новое окно только с таблицей с javascript, и сохранит это. – voyager

+0

Я застрял в части «... открыть новое окно»: -/ – OscarRyz

0

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

+0

Первый. Причина, по которой я не хочу генерировать текстовую версию, заключается в том, что, хотя это возможно, очень вероятно, что: а) они не синхронизируются с версией javascript (добавление столбцов, выполнение некоторых вычислений и т. Д. Должны быть изменены с обеих сторон js и serverside). b) Библиотека js использовалась именно для того, чтобы избавить нас от выполнения всех форматирования вручную. – OscarRyz

5

This link, кажется, точно объясняет, как решить вашу проблему.

+0

Похоже, что я ищу, но я не могу найти, как эта «магическая» функция должна работать: saveHTML (htmlContent) ... – OscarRyz

+0

Попробуйте: 'saveHTML ($ ('body'). Html())' –

+1

@ DVK: сэр, пожалуйста, посмотрите http: // stackoverflow.com/questions/10679927/export-to-excel-using-javascript – sqlchild

0

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

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

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

+0

Я бы скорее сгенерируйте серверный стол, прежде чем вникать в это. Но это именно то, чего я пытаюсь избежать. – OscarRyz

2

Вы приближаетесь к ответу, который я думаю. Проблема заключается в том, что «document.open(...)» может only take standard mime-types such as 'text/html', 'text/plain' and a few others

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

<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()"/> 

Надеется, что это помогает.

1

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

+0

(... таким образом избегая поездки туда и обратно.) – Kev

+0

Это на самом деле. Можете ли вы указать мне в правильном направлении на серверный javascript, пожалуйста? Понятия не имею. – OscarRyz

+0

Какая платформа для вашего сервера? – Kev

1

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

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

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

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

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

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

+0

Obrigado GmonC. На самом деле нет необходимости сохранять содержимое в файловой системе. Один и тот же запрос мог сгенерировать контент и установив тип mime в: '' application/vnd.ms-excel'', я мог бы клиенту обрабатывать содержимое, как если бы оно было превосходным. То, что я постараюсь избежать (если это возможно), - сделать поездку туда и обратно, потому что контент может быть уже большой. Я выбрал альтернативу, тем не менее, я думаю, что буду использовать эту версию для браузеров без тотализатора. – OscarRyz

+0

Obrigado для объяснения. Теперь я понимаю, что если документ слишком велик, это будет пустой тратой времени. Это будет работать, но это не оптимальное решение. Тем не менее, для браузеров, которые не нужны, все-таки нужны. Теперь вам нужно создать условие в js, «если нет, то есть, подход к серверу, иначе загрузить excel». Удачи! – GmonC

1

Вот мой код для сохранения сгенерированного содержимого [на стороне клиента] с помощью 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, и я не проверял работу в серверной среде.

Их необходимо решить в следующих версиях. (:.

Мир

+0

: -O это будет работать для .xls ??? – OscarRyz

+0

Приятно знать, что я на правильном пути. Да, я работаю над этим (формат .xls). Скоро опубликует код. – chong

+0

Пожалуйста, просмотрите мой обновленный код для открытия сгенерированной таблицы в формате xls здесь: http://stackoverflow.com/questions/1479020/save-the-document-generated-by-javascript/1606092#1606092 – chong

3

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

Ядро для доказательства концепции (проверено в 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, которая некоторое время перепутала меня.

+0

сэр, пожалуйста, посмотрите на http://stackoverflow.com/questions/10679927/export-to-excel-using-javascript – sqlchild

2

$(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's ready as Excel Sheet <a href='#'class='bbutton'>Click Here for download</a></p>

Смежные вопросы