Question

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

应指定新的内容类型，但会被忽略。

Answer 1

除非使用File -> Save Page As...保存客户端，否则您必须完全按照提议进行操作，将$('body').html()发布到您的服务器并将其作为文本处理。

Answer 2

This link似乎可以解释如何解决您的问题。

Answer 3

以下是以.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知道你是否面临任何问题。

和平。

Answer 4

根据您的浏览器支持要求，您可以使用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>');

我从在线示例中提取了基本64位编码/解码。小心：我抓到的那个在base 64编码之前包含了一个URI编码，这让我搞砸了一段时间。

Answer 5

你接近我认为的答案。问题是“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()"/>

希望这有帮助。

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

Answer 7

如果它只是一个报告，您可以使用服务器端JavaScript生成它，然后使用您需要的任何MIME类型提供它...

Answer 8

我不认为将html发送到服务器是一个棘手的解决方案。您只需要记住给用户提供下载此文件的链接。这可以使用传统的POST，甚至使用AJAX来完成。这取决于您希望用户在您的网页上进行互动的方式。

使用传统帖子，您可以将所有html内容放在页面中隐藏的输入类型的value属性中，名为“html_content”或类似内容，当用户点击“保存”按钮时，您发送用户到另一个带链接的页面做文件。您将html发送到服务器，脚本在具有唯一名称的文件系统中创建文件，并返回下载链接。

使用AJAX，你只需要做一个AJAX POST传递这个变量，然后你的脚本返回一个下载链接，你动态地将它放在你的html中 - 无需重新加载你的页面，就像它是“只有客户端”。

无论哪种方式，您都会返回指向您刚刚在文件系统中使用html扩展名创建的资源的链接。请记住在服务器中为每个生成的文件生成唯一的名称，以避免冲突。

请注意，虽然在IE 6中使用innerHTML（我不知道这是IE家族行为还是仅仅是6版本），但是大写所有标签并从属性中删除引号。如果您打算在HTML中进行一些后期处理，请小心。

我不知道jQuery或其他JS库在这种情况下的表现如何。我建议使用它，但它们有大量的浏览器兼容性检查来抽象我们使用的所有这些黑客。

Answer 9

这是我的代码，用JavaScript将生成的内容[客户端]保存到MSWord [.doc]格式的本地C：驱动器。

<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，我没有检查在服务器端环境中工作。

这些需要在即将发布的版本中解决。（：

和平。

Answer 10

您的javascript AJAX是从服务器获取document.writeln（）内容，还是您在向用户提供该页面时是否已生成该内容？因为如果它是前者，我认为没有理由为什么你不能在你使用的任何服务器端技术的会话中保存任何变量/查询，然后只是从那些生成纯文本的东西。否则，您将不得不遵守上述旅行者的建议。

Answer 11

由于你使用的是Ext JS，你可能有一个Store对象可以为网格提供数据吗？您应该能够通过遍历商店提取所需的数据，然后按照您希望的方式对其进行格式化。我不认为从生成的HTML中抓取数据是理想的。

从网格中获取所需数据并将其格式化为文本后，您可以将其发布到后端以启动下载（使用内容处置：附件等）。

如果您不关心跨浏览器，您还可以使用data：URL方案在不涉及后端的情况下启动下载。

Answer 12

这个插件完成了这项工作。测试IE，FF＆amp;铬。 https://github.com/dcneiner/Downloadify

保存javascript生成的文档

12 个答案: