← 返回主页

Markdown Table Export Test

This page is a test fixture for the table export feature.

It intentionally contains multiple tables with different structures and content. The expected table numbering follows their appearance order on the rendered page.

1. Basic Table

The first table tests the simplest normal Markdown table.

Name Score
Alice 95
Bob 91
Charlie 88

Expected:

  • Header and row structure are preserved.
  • CSV contains 2 columns and 4 rows.
  • XLSX contains the same data.
  • PNG contains the complete rendered table.

2. Chinese and Scientific Values

The second table tests Chinese text, Unicode, numbers, and scientific notation.

物理量 符号 数值 单位
重力加速度 gg 9.8 m/s²
光速 cc 3×10⁸ m/s
普朗克常数 hh 6.626×10⁻³⁴ J·s
电子电荷量 ee −1.602×10⁻¹⁹ C

Expected:

  • Chinese characters render correctly in PNG.
  • Unicode symbols are preserved.
  • XLSX and CSV contain readable Chinese.
  • The exporter must not corrupt superscripts, minus signs, or other Unicode characters.

3. Markdown Inline Content

The third table tests Markdown content inside cells.

Element Example Description
Bold important Bold text
Italic emphasis Italic text
Code const x = 1 Inline code
Link Hugo Markdown link
Mixed Bold + italic + code Multiple inline styles

Expected:

  • PNG should preserve the final rendered appearance as closely as practical.
  • XLSX and CSV should export sensible cell text rather than raw Markdown syntax where the implementation permits.
  • Inline elements must not break table identification or row/column extraction.

4. Alignment

The fourth table tests Markdown column alignment.

Left aligned Center aligned Right aligned
Alpha A 123
Beta B 4567
Gamma C 89

Expected:

  • The rendered table keeps the intended alignment.
  • PNG reflects the final rendered alignment.
  • XLSX/CSV preserve the data regardless of visual alignment.

5. Wide Table

The fifth table deliberately contains many columns and long text.

ID Name Category Description Status Owner Created Updated Priority Notes
001 Network latency monitor Networking Measures connection latency across several protocols and records the result for later comparison. Active Alice 2026-09-01 2026-10-01 1 Long content intended to force horizontal scrolling.
002 Markdown renderer Web Tests whether Markdown elements are converted into the expected HTML structure without affecting unrelated page components. Active Bob 2026-09-03 2026-10-02 2 This row is intentionally verbose.
003 Table exporter Frontend Exports the complete rendered table to PNG and structured table data to XLSX and CSV. Testing Charlie 2026-09-10 2026-10-04 1 Verify that the complete width is exported.

Expected:

  • The table should be horizontally scrollable if required by the existing responsive layout.
  • PNG must include the complete table width, not merely the currently visible viewport.
  • Exporting must not change the page’s horizontal scrolling behavior.
  • XLSX and CSV must include all 10 columns and all rows.

6. Numbers and Data Types

The sixth table tests values that may be interpreted as numbers, identifiers, dates, percentages, or text.

Value type Value Description
Integer 42 Ordinary integer
Decimal 3.1415926 Decimal number
Negative -273.15 Negative number
Percentage 95.5% Percentage-like text
Scientific notation 6.02×10²³ Scientific notation
Identifier 001234 Leading-zero identifier
Date 2026-10-04 ISO-style date
Version 3.14.0 Version-like text
Empty Intentionally empty cell

Expected:

  • Data must not be silently lost or rearranged.
  • Leading zeros should be preserved where the source value is textual.
  • Empty cells should remain structurally present.
  • XLSX type conversion must not unexpectedly alter identifiers such as 001234.

7. CSV Escaping

The seventh table specifically tests values that are significant for CSV serialization.

Case Value
Comma Hello, world
Double quote He said “hello”
Both Hello, “world”, again
Semicolon A;B;C
Colon key: value
Parentheses value (test)
Slash A/B/C
Rendered line break Line 1Line 2
Unicode 中文,English,数学

Expected:

  • CSV must remain valid when opened by a CSV parser.
  • Commas must not split a single cell into multiple columns.
  • Double quotes must be escaped according to CSV rules.
  • Unicode must remain readable.

8. Long Text and Wrapping

The eighth table tests long cell content and line wrapping.

Topic Content
Short Short text.
Medium This is a moderately long sentence intended to test normal cell wrapping without making the table excessively wide.
Long This is a deliberately long paragraph-like cell. The exporter should handle the rendered cell dimensions consistently, while XLSX and CSV should preserve the underlying textual content without truncation.
中文长文本 这是一段较长的中文文本,用于测试中文字体、自动换行、单元格高度以及导出 PNG 时是否能够完整保留最终渲染效果。

Expected:

  • PNG should not unexpectedly crop wrapped text.
  • Long cell contents should not be silently truncated in XLSX or CSV.
  • The table should remain usable on narrow screens.

9. Multiple Tables / Numbering

The ninth table is intentionally placed after all previous tables to test page-order numbering.

Table order Expected filename
1 table-1
2 table-2
3 table-3
4 table-4
5 table-5
6 table-6
7 table-7
8 table-8
9 table-9

Expected:

  • This table should itself be exported as table-9.
  • Earlier tables should retain their appearance-order numbering.
  • Exporting one table must not change the numbering of the others.

10. Minimal Edge Case

The tenth table is intentionally small.

A B
1 2

Expected:

  • Download controls still appear.
  • All three formats remain available.
  • No special-case layout bug occurs for very small tables.

Manual Test Checklist

Table UI

  • Every table has a low-visual-presence “下载表格” control.
  • The control is positioned at the lower-left of the table area.
  • The control does not change the table’s main layout.
  • Clicking it opens a lightweight menu.
  • Menu contains PNG, Excel (.xlsx), and CSV.
  • Menu can be used on desktop.
  • Menu can be used on mobile.
  • Multiple tables have independent controls.

PNG

  • Basic table exports successfully.
  • Chinese table exports successfully.
  • Markdown inline content is visually represented.
  • Wide table exports its complete width.
  • Long/wrapped cells are not unexpectedly cropped.
  • Table borders, spacing, alignment, and fonts are reasonably preserved.
  • Export does not capture unrelated page content.

XLSX

  • File opens successfully in a spreadsheet application.
  • Header row is preserved.
  • Row/column structure is preserved.
  • Chinese is readable.
  • Empty cells remain structurally correct.
  • Leading-zero identifiers are not unexpectedly changed.
  • Numeric-looking values are handled sensibly.
  • Long text is not truncated.
  • Files are named table-1.xlsx, table-2.xlsx, etc.

CSV

  • File opens successfully.
  • Header row is preserved.
  • Row/column structure is preserved.
  • Chinese is readable.
  • Commas inside cells are handled correctly.
  • Double quotes inside cells are handled correctly.
  • Rendered line breaks / newline-sensitive content do not corrupt row boundaries.
  • Empty cells remain structurally correct.
  • Files are named table-1.csv, table-2.csv, etc.

Responsive behavior

  • Desktop layout remains unchanged except for the export control.
  • Mobile layout remains usable.
  • Wide tables can still be horizontally scrolled.
  • PNG export includes the full wide table rather than only the viewport.

Integration

  • Article page works.
  • Dynamic page works.
  • Hugo build succeeds.
  • Browser console has no export-related errors.
  • Existing Markdown rendering remains unaffected.
  • Existing Hero animation remains unaffected.

Expected Table Count

This file contains 10 Markdown tables.

The implementation should identify them in this order:

  1. Basic Table
  2. Chinese and Scientific Values
  3. Markdown Inline Content
  4. Alignment
  5. Wide Table
  6. Numbers and Data Types
  7. CSV Escaping
  8. Long Text and Wrapping
  9. Multiple Tables / Numbering
  10. Minimal Edge Case

The “Multiple Tables / Numbering” table is deliberately self-referential: its own expected filename is table-9.xlsx / table-9.csv / corresponding PNG, because it is the ninth table in document order.

← 返回主页