返回资讯中心
外部精选
软件工程
#开发者实时流

There's a Web Standard for That

Our print CSS only kicks in when <body> has the printing-report-document class. It hides everything except our document with display: none. Note that visibility: hidden won’t work here, the app gets hidden but still tak…

Hacker News 最新KenHV2026/10/28 · 2 天前6 分钟阅读

以下正文同步自 Hacker News 最新,版权归原站所有,已转换为易读排版。

); document.title = previousTitle; }

Our print CSS only kicks in when <body> has the printing-report-document class. It hides everything except our document with display: none. Note that visibility: hidden won’t work here, the app gets hidden but still takes up space. You’ll get a few blank pages before the report starts.We also swap document.title while printing, because that’s the file name the browser suggests in the save dialog. Very important to not suggest something like “Dashboard.pdf”. Once print() returns, we restore both.What Print CSS can do #

Print CSS can do a lot more than you’d expect! You can set the paper size and margins. Each module starts on a new page. Charts and cards don’t get split across two pages, and headings don’t get stranded at the bottom of a page. Long tables repeat the header row on every page. Try doin’ that with html2pdf.js!The best part is I didn’t have to write much CSS at all. My teammates write good UI code, very composable. I set the general direction, and gpt-5.6 composed the rest with very little code.After all of that, we do a bit of cleanup. Expanding dropdowns/truncated text, removing buttons, disabling animations in interactable components like charts, stuff like that.At the end, we have a clean PDF that looks good, and takes pretty much no additional resources to render. If their machine can power the browser to render it on screen, it can render this just fine.Sunshine and rainbows, for the most part #

It’s not perfect though. The user does have to go through the browser’s print dialog. This makes bulk exports of PDFs admittedly a hassle. And unlike the Playwright route, we have to support multiple browsers’ print engines. Looking at you, WebKit! :sigh:For our use case - a tutor downloading a report and sending it - none of that really mattered. It took about three hundred lines of CSS. Web devs tend to complicate things a lot, a habit that unfortunately LLMs have picked up from them. Most problems are simple, so are good solutions.PS: Thanks Wikipedia for introducing me to Print CSS, I used to print a ton of articles to read when I was in school. I kinda don’t remember most of it, but hey, at least I remembered that this standard exists :P

© 2026 KenHVapplyTheme(); document.querySelector(

正文由 探How 从来源站点 RSS 同步,内容未经改写;遇到排版缺失或需要图片、视频时请以原文为准。

打开原文
去社区讨论 →