Включение скрытых данных в HTML-страницу для обработки javascript

Я создаю сложный сводный отчет HTML из данных в базе данных, который может быть резюме, возможно, 200 000 строк в базе данных. Пользователь может щелкнуть ссылку, чтобы запросить версию Excel.

Когда они делают JS script, извлекают ключевые компоненты отчета и заполняют их в форме в скрытом iframe. Эта форма отправляется на серверную сторону script, которая генерирует версию отчета Excel (без графики и т.д.).

Поскольку вычисления для отчета являются сложными и "дорогостоящими", имеет смысл не запускать их снова, чтобы создать версию Excel, поскольку все данные уже находятся на странице. Кроме того, пользователь может настроить отчет после его загрузки, и я могу использовать JS для передачи этих предпочтений в форму, поэтому документ Excel также отражает их.

Я делаю это, чтобы включить следующее для каждого компонента отчета, который переносится в строку в версии Excel. Я захватил HTML-тег, который иначе не используется.

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

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

Поскольку данные содержат текст, мне пришлось использовать что-то вроде }{ как разделитель полей, поскольку это вряд ли произойдет в любом реальном тексте отчета. У меня есть code для отображения: none в CSS.

Когда пользователь хочет получить версию своего отчета в формате Excel, JS-код ищет HTML для любых элементов <code> и помещает их имя класса и innerHTML в форму. Имя класса указывает, как форматировать строку в Excel, а затем данные помещаются в соседние ячейки в строке Excel.

В отчете HTML отображается одна процентная база (они могут переключаться между ними), но предпочтение пользователя при запросе версии Excel должно включать оба.

Есть ли лучший способ сделать это?

(Поскольку это часть сложного веб-приложения, ни один пользователь не собирается отключать CSS или не иметь javascript, или они не получили бы это далеко) ADDED: я не могу использовать HTML5, поскольку пользователи часто работают в старых браузерах, таких как IE6

Ответ 1

Используйте новые атрибуты данных

http://www.javascriptkit.com/dhtmltutors/customattributes.shtml

<div data-row="[[&quot;Musicals&quot;,40,28.6,6], ...]">

Разделителем может быть тег TD или тег TR или любой другой соответствующий тег, уже связанный с строкой, а " - это экранированный ".

Это делает данные скрытыми от просмотра, а также гарантирует, что на него будут поступать стандартные решения для обработки данных.

Также для кодирования данных я бы предложил использовать JSON, поскольку это также стандартный, который прост в использовании.

Ответ 2

Стандартные решения:

1) Используйте блок данных Javascript:

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

2) Используйте атрибуты элемента: (см. http://ejohn.org/blog/html-5-data-attributes/ для получения дополнительной информации)

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

... и затем используйте Javascript для загрузки атрибутов по мере необходимости.

Этот второй вариант будет использоваться, когда данные связаны с данным элементом. Обычно вы не хотели бы использовать это для данных, которые будут использоваться в другом месте; Я бы сказал, что в вашем случае простой блок данных Javascript будет гораздо лучшим решением.

Если вы используете атрибуты данных в соответствии со вторым вариантом, обратите внимание на использование префикса 'data-' для атрибутов. Это спецификация HTML5, которая сохраняет определенные пользователем атрибуты отдельно от обычных HTML. Дополнительную информацию об этом см. на связанной странице.

Ответ 3

Вы можете попробовать ~~new~~ html5 функцию localStorage вместо использования скрытых html-полей, то есть если вы убедитесь, что ваши пользователи используют современные браузеры ~~только последние~~.

В любом случае, улучшение вашего кода было бы фактически хранить данные в формате JSON:
Вместо

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

вы бы использовали что-то вроде

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

Таким образом вы можете создавать объекты javascript только посредством ~~оценки (eval) или~~ синтаксического анализа (JSON.parse) innerHTML скрытого элемента быстрее, чем вы интерпретируете свои собственные фигурные скобки протокол.

Ответ 4

Моя точка зрения, чтобы решить, что лучшим способом было бы взять эти результаты и сохранить в каком-то временном файле XML на сервере, показать содержимое в браузере и, когда пользователь запросит версию Excel, вам нужно только взять временный XML.

Взгляните на Linq-to-XML, потому что его программирование в свободном стиле поможет вам прочитать XML файл в нескольких строках, а затем создать такой файл Excel.

Другое решение будет сериализовать вашу коллекцию объектов в JSON и десериализовать их с помощью DataContractJsonSerializer. Это сделает размер временного файла меньше, чем XML.