Сохраните документ, созданный 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');
следует указать новый тип контента, но он игнорируется.
12 ответов
вот обновленная версия, чтобы открыть содержимое таблицы .формат 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, это не сохраняет файл в системе клиента. Он открывает приложение с содержимым таблицы, и клиент должен сохранить он.
надеюсь, это поможет в ответе на вопрос ur. Lemme знать, если вы сталкиваетесь любые вопросы.
Мирный.
если его не будет сохранена клиентская сторона с File -> Save Page As...
, вам придется делать то, что вы предлагаете, проводки $('body').html()
на ваш сервер и обработайте его как текст.
в зависимости от требований к поддержке браузера, вы можете использовать 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 перед кодированием базы 64, который испортил меня на некоторое время.
вы приближаетесь к ответу, который я думаю. Проблема в том, что 'document.open(...)
' can возьмите только стандартные типы 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()"/>
надеюсь, что это помогает.
$(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>
Если это просто отчет, вы можете использовать серверный JavaScript для его создания, а затем обслуживать его с любым типом MIME, который вам нужен...
Я не думаю, что отправка вашего html на сервер является сложным решением. Вы просто должны помнить, чтобы дать ссылку для пользователя, чтобы загрузить этот файл. Это можно сделать с помощью традиционного поста или даже с помощью AJAX. Это зависит от того, как вы хотите, чтобы ваши пользователи взаимодействовали, если ваша страница.
Используя традиционный пост, вы можете поместить все содержимое html в атрибут value типа ввода, скрытого на Вашей странице, с именем "html_content" или что-то в этом роде, и когда пользователь нажимает кнопкой "Сохранить" вы отправляете своего пользователя на другую страницу со ссылкой сделать файл. Вы отправляете html на сервер, скрипт создает файл в файловой системе с уникальным именем и возвращает ссылку для загрузки.
используя AJAX, вам просто нужно сделать сообщение AJAX, передающее эту переменную, а затем ваш скрипт возвращает ссылку для загрузки, и вы динамически помещаете ее в свой html - без перезагрузки страницы, как будто это была "только сторона cliente".
в любом случае, вы вернете ссылка на ресурс вы только что создали в своей файловой системе расширение html. Не забудьте создать уникальные имена на сервере для каждого созданного файла, чтобы избежать конфликтов.
остерегайтесь, хотя использование innerHTML в IE 6 (я не знаю, является ли это семейным поведением IE или только о версии 6) в верхнем регистре все теги и удаляет кавычки из атрибутов. Если вы планируете сделать некоторую обработку сообщений в своем html, будьте осторожны.
Я не знаю, как jQuery или другие библиотеки JS ведут себя в таких положения. Я бы предложил использовать его, Хотя у них есть много проверок совместимости браузера, чтобы абстрагировать все эти хаки, которые мы используем.
вот мой код для сохранения сгенерированного содержимого[на стороне клиента] 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>
я быстро работал над проблемой ur и придумал этот фрагмент кода. Надеюсь, я правильно понял вашу проблему.
в контрсилой в мой код
- формат файла .док и нет .формате xls.
- во-вторых, файл сохраняется в статическом месте, а не в указанном пользователем месте[может быть оптимизированный.]
- и код использует ActiveX, и я не проверял работу в серверной среде.
они должны быть рассмотрены в будущих версиях. (:
Мирный.
ваш javascript AJAX, который извлекает документ.writeln() контент с сервера, или вы уже генерируют контент, когда страница подается пользователю ? Потому что, если это первое, я не вижу причин, почему вы не можете сохранить какие-либо переменные / запросы в сеансе любой серверной технологии, которую вы используете, а затем просто генерировать простой текст из них. В противном случае вам придется следовать предложению voyager выше.
поскольку вы используете Ext JS, у вас, вероятно, есть объект Store, который предоставляет данные в сетку? Вы должны иметь возможность извлечь необходимые данные, пройдя через магазин, а затем отформатировать его так, как вы хотите. Я не думаю, что очистка данных из сгенерированного HTML является идеальной.
Как только вы захватите необходимые данные из сетки и отформатируете их в текст, вы можете опубликовать их на бэкэнде, чтобы начать загрузку (с Content-Disposition: attachment etc.)
Если вы не будучи кросс-браузером, вы также можете использовать схему data: URL для запуска загрузки без привлечения бэкэнда.
этот плагин выполняет эту работу. Протестировано на IE, FF и Chrome. https://github.com/dcneiner/Downloadify