14

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

应该指定新的内容类型,但它被忽略了。

4

11 回答 11

7

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

于 2009-09-25T19:04:29.230 回答
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 版本不同,这不会将文件保存在客户端的系统中。它打开带有表格内容的应用程序,客户端必须保存它。

希望这有助于回答你的问题。让我知道你是否遇到任何问题。

和平。

于 2009-10-22T09:38:51.740 回答
3

根据您的浏览器支持要求,您可以使用数据 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 编码/解码。小心:我抓到的那个在 base 64 编码之前包含一个 URI 编码,这让我有一段时间搞砸了。

于 2009-10-22T04:36:48.277 回答
2

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

希望这可以帮助。

于 2009-10-17T11:09:18.630 回答
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>

于 2014-09-18T03:10:14.623 回答
1

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

于 2009-10-20T20:46:20.940 回答
1

我不认为将您的 html 发送到服务器是一个棘手的解决方案。你只需要记住给你的用户一个链接来下载这个文件。这可以使用传统的 POST,甚至使用 AJAX 来完成。这取决于您希望您的用户如何与您的页面进行交互。

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

使用 AJAX,您只需执行 AJAX POST 传递此变量,然后您的脚本返回一个下载链接,然后您将其动态放入您的 html - 无需重新加载您的页面,就像它是“仅客户端”。

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

请注意,尽管在 IE 6 中使用 innerHTML(我不知道这是 IE 系列行为还是大约 6 版本)会将所有标签大写并从属性中删除引号。如果您打算在 html 中进行一些后期处理,请小心。

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

于 2009-10-21T05:29:25.200 回答
1

这是我的代码,用于将 JavaScript 生成的内容 [client-side] 以 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,我没有检查在服务器端环境中的工作。

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

和平。

于 2009-10-21T14:26:05.553 回答
0

您的 javascript AJAX 是从服务器获取 document.writeln() 内容,还是在向用户提供页面时已经生成该内容?因为如果是前者,我认为您没有理由不能在您使用的任何服务器端技术的会话中保存任何变量/查询,然后从这些技术中生成纯文本内容。否则,您将不得不遵循上面航海者的建议。

于 2009-09-25T19:05:24.827 回答
0

由于您使用的是 Ext JS,您可能有一个向网格提供数据的 Store 对象?您应该能够通过浏览 Store 来提取所需的数据,然后按照您想要的方式对其进行格式化。我认为从生成的 HTML 中抓取数据并不理想。

从网格中获取所需的数据并将其格式化为文本后,您可以将其发布到后端以启动下载(使用 Content-Disposition:附件等)

如果您不关心跨浏览器,您还可以使用 data: URL 方案来启动下载,而无需涉及后端。

于 2009-09-25T19:24:20.800 回答
0

这个插件可以完成这项工作。在 IE、FF 和 Chrome 上测试。 https://github.com/dcneiner/Downloadify

于 2013-08-23T17:40:26.183 回答