离线 · 无上传 · 浏览器本地完成Offline · no uploads · runs in the browser
CSV 转 PNG——离线、整张表成一张图、不上传CSV to PNG offline — one striped table image
要把一张表甩进只吃图片的地方(聊天、幻灯片、表单附件),一张图比一段贴过去会散版的表格可靠。两步:`csv>html` 用 `raw: true` 读取(所以 `00424` 不会缩成 `424`、`2024-01-05` 不会变成 `1/5/24`,实测 `data-v` 与显示文本一致)并交给 `sheet_to_html` 写成一张表,再套上这份扩展自带的样式表;`html>png` 把净化后的文档离屏渲染成整页画布并无损编码。图里看到的排版因此是那条样式表决定的:正文最大宽度 800 px 居中、表格 `width: 100%` 且 `border-collapse`、每个单元 1px 实线边框加内边距、偶数行一层浅底——**注意条纹按行序落**:因为 `sheet_to_html` 不产出 `<th>`(实测每行都是 `<td>`),你的表头行不会得到特别待遇,它是第一行、白底,第二行才有浅底。列多而窄时文字换行而不是把画布撑宽(正文的 `word-wrap: break-word`),所以你得到的是一张排版宽度固定(800 px 正文)、高度随内容长的一张图,而画布的像素宽度按内容高度取 2x、1.5x 或 1x——越长的文档像素密度越低。两条边界:整页高度上限 32768 px(`MAX_CANVAS_EDGE × 4`),超出报「渲染高度过大」而不是交付空白画布或被截短的图;图里的文字不是文字,PNG 没有文字层。全过程在这个标签页里完成,只有 storage 权限,渲染前还会剥掉远程引用。When a table has to go somewhere that only accepts pictures — chat, a slide, a form attachment — one image is more dependable than a paste that loses its layout. Two steps: `csv>html` reads with `raw: true` (so `00424` does not shrink to `424` and `2024-01-05` does not become `1/5/24`; measured, `data-v` and the displayed text agree), hands the sheet to `sheet_to_html`, and wraps it in the stylesheet this extension ships; `html>png` renders the sanitised document offscreen and encodes the whole page losslessly. What you see is that stylesheet: an 800 px centred measure, `width: 100%` tables with `border-collapse`, a 1px rule and padding on every cell, and one tint on even rows — and **the striping follows row order**, because `sheet_to_html` emits no `<th>` (measured: every row is `<td>`), so your header row gets no special treatment: it is row one, on white, and row two is the first tinted one. With many columns the text wraps rather than widening the canvas (`word-wrap: break-word` on the measure), so what you get is a fixed 800 px measure with a content-driven height, while the canvas pixels come out at 2x, 1.5x or 1x depending on that height — the taller the table, the lower the density. Two boundaries: one capture is bounded at 32768 px of height (`MAX_CANVAS_EDGE × 4`) and past it the route reports “too tall to render” instead of delivering a blank canvas or a trimmed image; and text in the picture is not text — a PNG has no text layer. All of it inside this tab on the storage permission, with remote references stripped before rendering.
这条链路怎么走How the route runs
CSVCSV HTMLHTML PNGPNG
共 2 步,由扩展的路径搜索自动选出,中间产物不落盘。2 steps, chosen by the extension's own path search; intermediate results never touch the disk.
会保留什么What carries over
- 值按写下的字符进图:`raw: true` 让 `00424` 与 `2024-01-05` 保持原字符,图里不会出现被推断过的 `424` 或 `1/5/24`Characters go into the picture as written: `raw: true` keeps `00424` and `2024-01-05`, so no inferred `424` or `1/5/24` shows up
- 边框与条纹由自带样式表给出:每格 1px 实线、表格 100% 宽并折叠边框,偶数行一层浅底Rules and striping come from the bundled stylesheet: a 1px border on every cell, 100% width with collapsed borders, one tint on even rows
- 排版宽度固定、高度随内容:一张图就是一整张表,不用滚动拼接,像素密度则按高度取 2x / 1.5x / 1xA fixed 800 px measure with content-driven height: one image is the whole table, with no scrolling and no stitching, while the pixel ratio steps 2x → 1.5x → 1x as the page grows taller
- 无损编码:像素之间不引入新的量化损失,但能放大到多清楚由那档像素密度决定——很长的表落在 1xLossless encoding: no extra quantisation between pixels, though how far it stays readable when zoomed depends on the density the height chose, and long tables land on 1x
如实说明的限制What it does not do
- 表头不会被特别对待:没有 `<th>`,条纹按行序落,所以第一行是白底——想让表头在图里显眼,请在源数据里自己加视觉区分The header is not treated specially: with no `<th>`, striping follows row order, so row one is untinted — add your own visual cue in the source if it has to stand out
- 高度上限 32768 px:几千行的表会报错并说明,不给被截短的图;要分页请走 CSV→PDF 或 CSV→JPGA 32768 px height ceiling: a table of thousands of rows fails with an explanation rather than a trimmed picture; take CSV to PDF or JPG for pages
- 文字不可选中、搜索或朗读:PNG 没有文字层,要这些请用 HTML / Markdown / ExcelNothing is selectable, searchable or copyable: a PNG has no text layer, so use HTML, Markdown or Excel for that
- 宽表不换画布宽度而是换行:列特别多时每列会挤窄,读起来不如原始 CSV 利落Wide tables wrap instead of widening: with many columns each one squeezes and it reads less cleanly than the CSV itself
- 质量与目标体积是有损容器才有的档位:面板对 PNG 不提供它们,编码器也会忽略;这一路可调的只有最长边,超出会重采样Quality and a target file size belong to lossy containers: the panel does not offer either for PNG and the encoder ignores them, so the only dial that applies here is the longest edge, which resamples when exceeded
实操提示Working with it
- 要能打印的成品:CSV→PDF 走同一条 HTML 中转,分页与页边距在那边For something printable: CSV to PDF shares the HTML bridge, with pages and margins on that side
- 要小体积的分享图:CSV→JPG 按 A4 分页逐页有损编码,长表会出 ZIPFor smaller shareable pictures: CSV to JPG encodes A4 pages lossily one by one, long tables arriving in a ZIP
- 要继续加工数据:CSV→Excel 或 CSV→JSON,图片这一格交付的是给人看的那一张To keep working on the data: CSV to Excel or JSON — this page delivers the picture, not the dataset
常见问题Questions people actually ask
为什么图里第一行没有加粗或底色?Why is the first row in the image not bold or shaded?
因为中间那份 HTML 里没有 `<th>`——实测 `sheet_to_html` 每行都写成 `<td>`,样式表里加粗与浅底是挂在 `<th>` 与偶数行上的,所以你的表头行只会按普通第一行的样子出现。要那个外观,可在源文件里插一行视觉分隔,或转成 HTML 后自己套样式。Because the intermediate HTML has no `<th>` — measured, `sheet_to_html` writes every row as `<td>`, and the stylesheet’s bold and tint hang on `<th>` and on even rows, so a header row appears as just row one. Add a visual separator in the source, or style it after converting to HTML.
一张几百列的表会怎样?What happens to a table with hundreds of columns?
宽度固定在 800 px 正文里,表格占满它,列数越多每列越挤,单元内文字换行;只有内容高度超过 32768 px 时这条链会明确报错。所以宽表更适合走 HTML 或 Excel,图片适合列数可控、想一眼看完的那类。The measure stays 800 px wide and the table fills it, so more columns means narrower ones with wrapping text; the route only fails outright past 32768 px of content height. Wide tables belong with HTML or Excel — a picture is for tables you can take in at one look.
数字会在图里变成科学计数吗?Do numbers go exponential in the image?
不会。这一路的读取用 `raw: true`,值以字符形态进表格,长整数与带前导零的编号原样显示——被推断成数字(进而可能被显示成科学计数)的是不按 raw 读的那条路。图里的样子就是你文件里的字符。No. The read uses `raw: true`, so values enter the table as characters and long integers or zero-padded ids display exactly as typed; the inferred-into-a-number path is the non-raw read. What the picture shows is the characters in your file.
不需要账号,也不需要联网:装好扩展后点图标,在新标签页里打开工作台,文件从磁盘直接选。No account and no network: install the extension, click its icon, and the workbench opens in a new tab reading straight off your disk.
从 Chrome 应用商店安装Install from the Chrome Web Store 安装步骤Install steps GitHub 源码Source on GitHub
要把它压到指定体积?Need it under a target size? The 图片压缩工具image compressor可以在浏览器里重编码 PNG / JPEG / WebP。 re-encodes PNG / JPEG / WebP in the browser.