在HTML页面中包含隐藏数据供javascript处理

我从数据库中的数据生成一个复杂的HTML摘要报告，它可能是数据库中大约200000行的摘要。用户可以单击链接以请求Excel版本

执行此操作时，JS脚本将提取报表的关键组件，并将其填充到隐藏iframe中的表单中。此表单提交到服务器端脚本，该脚本生成报告的Excel版本（无图形等）

由于报表的计算非常复杂且“昂贵”，因此不必再次运行它们来创建Excel版本，因为所有数据都已在页面上。此外，用户可能已经定制了加载后的报告，我可以使用JS将这些首选项传递给表单，以便Excel文档也反映这些首选项

我这样做的方式是为报告中传输到Excel版本行的每个组件包括以下内容。我劫持了一个HTML标记，它在其他情况下不会被使用

   <code id="xl_row_211865_2_x" class="rowlabel">Musicals}{40%}{28.6%}{6</code>

音乐剧{40%}{28.6%}{6

上面的代码元素是HTML报告中下一行的摘要，它在Excel文档中成为一行，包括标签和各种数据元素。一个报告中可能有一千个或更多这样的元素

由于数据包含文本，我不得不使用类似

}{

的内容作为字段分隔符，因为这不太可能出现在报表中的任何真实文本中。我已将

code

设置为显示：CSS中无

当用户需要Excel版本的报告时，JS代码在HTML中搜索任何

元素，并将其类名和innerHTML放入表单中。类名指示如何在Excel中格式化行，然后将数据放入Excel行的相邻单元格中


HTML报告显示了一个百分比基数（它们可以在两者之间切换），但在请求Excel版本时，用户首选同时包含这两个百分比

有更好的方法吗

（由于这是一个复杂web应用程序的一部分，因此没有用户会关闭CSS或缺少javascript，否则他们不会走到这一步）
补充：我不能使用HTML5，因为用户是公司，通常在IE6等旧浏览器上使用新的数据属性




div可以是
TD
标记或
TR
标记，或者已经与行相关的任何其他相关标记，
“
是转义的
”

这使得数据隐藏在视图之外，并确保会有标准的解决方案来处理数据

此外，对于数据编码，我建议使用，因为这也是一个易于使用的标准。
我的观点是，以更好的方式解决这一问题，将这些结果保存在服务器中的某个时态XML文件中，在浏览器中显示内容，当用户请求Excel版本时，您只需要使用时态XML即可

看看linqtoxml，因为它流畅的编程风格将帮助您在几行中读取XML文件，然后创建这样的Excel文件

另一种解决方案是将对象集合序列化为JSON，并使用DataContractJsonSerializer反序列化。这将使临时文件的大小小于XML方法。
如果您确定用户只使用最新的浏览器，您可以尝试新的html5功能，而不是使用隐藏的html字段

无论如何，对代码的一个改进是以以下格式实际存储数据：

而不是

Musicals}{40%}{28.6%}{6

你会使用类似于

{
    "label": "Musicals",
    "percentage1": 40,
    "percentage2": 28.6,
    "otherLabel": 6
}

通过这种方式，您可以通过计算（eval）或解析（
JSON.parse
）隐藏元素的内部HTML来构建javascript对象，其速度比您解释自己的花括号协议要快。
标准解决方案：

1） 使用Javascript数据块：

<script>
var mydata = {
         'Musicals': ['6','40%','28.6%'],
         "That's Life": ['2','13.2%','0.5%'],
         ...etc....
      }
</script>


var mydata={
‘音乐剧’：[6%，'40%，'28.6%，]，
“这就是生活”：['2'，'13.2%，'0.5%，
等
}

2） 使用元素属性：
（有关更多信息，请参阅）



…然后根据需要使用Javascript加载属性

第二个选项将在数据与所讨论的元素相关时使用。您通常不希望将其用于其他地方使用的数据；我想说，在您的情况下，简单的Javascript数据块将是更好的解决方案

如果您确实按照第二个选项使用数据属性，请注意属性上使用了“data-”前缀。这是一个HTML5规范，它将用户定义的属性与普通HTML属性分开。有关详细信息，请参阅链接页面。
这在服务器上的成本（以实际值计算）有多高。在服务器上这样做是否会更容易/更易于维护，并且在页面的初始加载中没有数千个可能未使用的代码标记？我不知道这是否可行，但似乎对我来说可以：将JSON对象保留为全局变量？或者隐藏在某处？在请求时，发送JSON to excel解析器？报表中的行是HTML还是图像？如果它们是HTML，您的javascript可以从中提取信息，而不是将其存储在不同的额外标记中。我们的用户在大公司中，他们中的许多人仍然使用IE6！所以HTML5解决方案出笼了我担心这是一个很好的观点，但我发现有些疯狂在web浏览器中以任何方式存储200k条记录的事实。本地存储、数据属性或任何解决方案。客户端计算机中需要多少内存（本地存储在硬盘中，数据属性在内存中？）.@Matias它存储在一个文件中，但我相信文件的位置和类型完全取决于浏览器开发人员。这里举个例子：#2已经过时了，因为这些人经常使用旧浏览器。#1将很困难，因为数据是在
<script>
var mydata = {
         'Musicals': ['6','40%','28.6%'],
         "That's Life": ['2','13.2%','0.5%'],
         ...etc....
      }
</script>

<div class='my_data_row' data-name='Musicals' data-col1='6' data-col2='40%' data-col3='26.6%'>