跳至主要內容
Lizely

CSV 到 HTML 表格轉換工具

將 RFC 4180 風格的 CSV 轉換為轉義後的結構化表格標記,並提供安全的 React 預覽與精確的剪貼簿輸出。

隱私權:你的檔案不會離開裝置,所有處理均在瀏覽器本機完成。

使用方式

  1. 1.貼上逗號分隔的 CSV,並選擇其第一筆資料是否包含欄位標題。
  2. 2.轉換後比對報告的行與欄數,並檢視安全預覽與原始資料。
  3. 3.複製轉義的表格片段,然後在目標頁面加入 accessibility 語義與響應樣式。

關於CSV 到 HTML 表格轉換工具

CSV 到 HTML 表格轉換工具可將逗號分隔的文字轉為完整表格片段與可讀的預覽。貼上 CSV,判斷第一筆資料是否為標題,進行轉換,檢視尺寸與產生來源,然後複製 HTML。解析、轉義、預覽構建與剪貼簿存取皆在當前瀏覽器標籤中完成。

解析器遵循一種明確且受限的 RFC 4180 風格語法。僅以逗號為分隔符,CRLF 為記錄結束的標準,而獨立的 LF 與 CR 則作為文件互操作的延伸功能被接受。最後一筆資料的結束符可選,不會產生虛假的資料行。分號、製表符與管道仍視為普通欄位內容;工具不會猜測分隔符。

欄位可無引號或以雙引號包圍。引號欄位可包含逗號與記錄結束符。雙引號出現在引號欄位內時,會解碼為單個引號。若雙引號出現在未引號欄位中則會被拒絕。引號結束後,僅允許逗號、記錄結束或輸入結束。這些規則可避免因以逗號分割每行而導致的欄位錯位。

每筆記錄必須包含與第一筆記錄相同數量的欄位。中間與尾端的空欄位將被保留。一個前導的 U+FEFF 字元視為常見的 UTF-8 BOM 訊號,解析前會被移除;其他位置出現的相同字元則視為資料。轉換工具不會修剪欄位文字、推斷數值或日期、計算公式、合併欄位、解析註解、辨識電子表格型別或修復錯誤的記錄。

啟用標題選項,第一張記錄會變成一個Th細胞的首頁列,剩下的記錄會變成 td細胞的 tbody列. 當它被禁用時,每張記錄都會變成 tbody中的 td列.輸出是一片碎片,而不是完整的文件:它不包含doctype,html,頭,體,字幕,CSS,JavaScript,ARIA描述,排序,過濾,頁面化或響應式包裝.。

每一個欄位都會進行轉義以適應 HTML 文字內容。與號、尖括號、引號與撇號將轉為實體字元,再組合成標記。頁面預覽則使用 React 文位元組點獨立渲染,從未使用 dangerouslySetInnerHTML。因此,包含 script、圖片、事件處理函式或標籤類文字的 CSV 欄位將以文字形式直接顯示,不會變成本頁的可互動元素。下游應用仍需將複製的片段放入 HTML 內容環境中,並維護自身的內容安全策略。

此工具允許最多 500,000 個輸入字元、10,000 總行數、200 列數、200,000 個單元格,以及 ZXQT或其他 5,000,000 個輸出字元。超過限制會回傳錯誤,不會產生部分或靜默截斷的表格。即使語法正確的表格,若過於寬廣、缺少字幕、使用不清楚的標題或依賴色彩單獨辨識,仍可能無法使用或無法存取。整合後請檢視語義與行動端行為。

八個外部元件涵蓋換行符、引號、嵌入換行、空白單元格、單獨換行符、Unicode 以及前導 BOM。測試也會驗證精確轉義、th 與 td 結構、不均勻紀錄拒絕以及未關閉引號。為確保可靠使用,請先檢視 CSV 語法,轉換代表性樣本,比較行與列數量,然後在最終頁面加入字幕、適當標題範圍、響應行為以及產品專屬樣式。

方法與來源

執行一個有限狀態的逗號解析器,處理帶引號的欄位、雙引號轉義、嵌入的 CRLF/LF/CR、精確的記錄寬度與明確的預算;並對每個單元格進行 HTML 文字內容的轉義;之後產生確定性的表格、thead、tbody、tr、th 和 td 標籤,同時透過 React 文位元組點預覽。

常見問題

為何以分號分隔的檔案會保持在單一列?
語法刻意只使用逗號,不會猜測分隔符。請將來源轉換為逗號分隔的 CSV 或使用明確支援該語法的工具。
CSV 個元能否在預覽中產生活躍的 HTML?
否。產生的來源會逸出儲存格文字,而預覽使用 React 文位元組點,而非注入產生的 HTML。
片段會自動成為符合存取性的生產表格嗎?
否。標題儲存格是個有用的起點,但目標可能也需要字幕、範圍關係、說明文字、響應行為以及產品特定的測試。

開發者工具 使用指南

查看全部