16 ms·

Show HN: PDFs from HTML

742 points by abhinav22 6y ago

john-doe 6y ago
Great paged.js tutorial, thank you for publishing it.
- abhinav22 6y ago
  Thank you! Paged.js is really such an awesome tool. I was searching for many weeks for something like this, so I really think the word needs to get out there more. It could significantly improve the workflows of many people who are self writing / self publishing as it opens up the power of CSS and HTML (which allows to nicely defined formatting templates and use code to automate content generation) to pdf reports (which I think has its place). I haven’t used pandoc, but I think a HTML/CSS/Paged.js workflow could challenge it. At work I’m already converting many processes to it - I have a database of content and then use SQL queries to extract data and then generate beautiful PDFs through paged.js. It also works well with mathematical typesetting (via MathJax).
hu3 6y ago
Are there any report generation libraries built on top of page.js? I've been looking for report generation solution based on frontend technology. Btw. This is great. Thanks for sharing.
- nojito 6y ago
  Yup. I use pagedown all the time. https://pagedown.rbind.io/ https://pagedown.rbind.io/
  - adamjhyde 6y ago
    In case you missed it, pagedown implements pagedjs afaik
- abhinav22 6y ago
  Thanks for your kind words. Would you be able to expand on what you mean by “report generation libraries”? For example, I am building (in Common Lisp, but it’s trivial and can be done in any software) a tool to read content from a database and auto generate the HTML markup for producing pdf reports. This allows me to reuse content across reports and also leverage the full power of databases (text search in particular). As another example, I have many monthly financial metrics - I will store these in a database then use my lisp markup tool to generate the necessary HTML to produce the pdf report (via paged.js). In addition, one can use headless chrome to automate the full workflow so that the reports are generated directly from your program and not via File > Print in your browser. Was that what you were thinking of? You can also add charts via charts.js. The beauty of paged.js is that you can leverage many of the features of browsers and JavaScript libraries in your report generation. I wasn’t able to get syntax highlighting for code blocks to work however, need to dig into that a bit more.
  - hu3 6y ago
    > Was that what you were thinking of? Yes! This is great. Thanks for the pointers. I'll look into that.
- dreix 6y ago
  I started generating PDF before pagedjs and use my own electron based solution. Search for schild.report on github to see how it works. Basically reports are created via svelte templates and then printed via the electron print api. Works extremely well.
- aforwardslash 6y ago
  I've built a python library called ZipReport to manage and generate PDF reports from HTML using paged.js - https://github.com/zipreport https://github.com/zipreport The actual PDF generation component is an electron application, so it may fit your "frontend technology" requirement.
exhilaration 6y ago
Does anyone know how this compares to PrinceXML / DocRapotor? We pay them big bucks for PDF generation (invoices specifically) and so far we haven't found anything comparable.
- Semaphor 6y ago
  Not sure about paged.js, but we use Weasyprint for invoices. It isn’t as advanced as some of the paid options (most annoyingly page headers are somewhat hacky) but it works very well. My go-to for everything CSS Paged Media is [0] which has a nice comparison of supported features at [1]. They recently added Weasyprint, PagedJS and Typeset.sh [0]: https://css.paged.media/ https://css.paged.media/ [1]: https://css.paged.media/lessons https://css.paged.media/lessons
- abhinav22 6y ago
  I was a huge supporter of PrinceXML / DocRaptor for precisely the same reason - all the alternatives (that I knew at the time) were not good. Paged.js was a revelation (thanks to HN for telling me about it!). It is based off CSS Print Specifications like PrinceXML (as is my understanding - I’m about 95% sure), and to me it’s even better because it utilizes all the other front end technologies directly from your browser - I think there are some use cases where PrinceXML won’t be able to get the same functionality. For invoices, I think you should be able to easily switch over. Based on what I can see.
- cdolan 6y ago
  I also pay a lot per month to DocRaptor and they’ve been very reliable to date, but unless I’m rendering charts with JS I feel like I’m really overspending
- zulko 6y ago
  A few years ago I started an alternative to PrinceXML called ReLaXed.js [1], it's always been sufficient for my reports but it may lack some pagination/layout features that Paged.js may have as they seem to have given this much more thoughts (still wrapping my head around whether paged.js could be "plugged into" Relaxed). [1] https://github.com/RelaxedJS/ReLaXed https://github.com/RelaxedJS/ReLaXed
systemvoltage 6y ago
There is something really pleasing about reading PDFs. It’s perhaps how static it is and it won’t change on me. I can zoom in or “operate” on it without some reorganization. It puts the mind to ease. There is no reflowing. There is no columns shifting. It’s just is. Like a piece of paper as an analog - the intent of the author and the designer is retained and frozen in time. Fonts are embedded and chosen by the creator. Haters of PDFs do not understand the human aspects of it - they just see it as a specification (which is convoluted).
- maga 6y ago
  Maybe it's simply a force of habit at this point, but I can only read/study/memorize technical stuff from PDF/paginated source--I memorize the overall "picture" of the page and it's location along with the bits I actually need, and it's really tough to do with non-paginated sources.
  - Nullabillity 6y ago
    Sounds like scrolling is actually a positive then, by forcing you to focus on understanding the content rather than relying on rote memorization.
    - dredmorbius 6y ago
      Spatial memory is not rote memorisation. https://en.wikipedia.org/wiki/Method_of_loci https://en.wikipedia.org/wiki/Method_of_loci
      - Nullabillity 6y ago
        Not sure what you're trying to say, that article pretty much only talks about its applicability to (inherently rote) memorization contests. It doesn't say _anything_ about meaningfully integrating the information as knowledge. Which also seems to align with the article's description of how it works: you're not trying to figure out the underlying structure of what's going on, you're making up a new structure as you go based on the surface-level patterns.
mywacaday 6y ago
The section numbers in the table of contents are over writing the text, maybe not so beautiful.
- abhinav22 6y ago
  Thanks for flagging. It’s aimed for desktop users and a reasonable size screen (eg A4 or so), it’s not really a responsive design as it’s meant to be a tool to generate PDFs. So it won’t work in some browser dimensions (the paged.js code is reasonably complex). That said it works in iOS as far as I can test. For some reason page numbers in table of contents not working perfectly in Safari but Chrome works pretty well. I guess the conclusion is that this is aimed somewhat to desktop Chrome users as a specific tool for pdf generation.
  - Tomte 6y ago
    I'm seeing all page numbers as 0 in the TOC on iPadOS.
    - abhinav22 6y ago
      Yep - looks like Chrome only gets those right. I will speak to the paged.js guys and see where the bug is in the code. Rest seems to work on Safari - let me know if any other issues and I’ll fix / update accordingly
  - mywacaday 6y ago
    I'm in chrome on a Samsung note 10+. If you want to add contact details somewhere I'll send you a screenshot and do a test when you're ready.
sunjester 6y ago
mobile friendly?
- abhinav22 6y ago
  No, it’s more for pdf production from desktop. The print preview on the example web page works on iPhone and browsers but the aim is really for pdf and not for consumption via mobile etc
majkinetor 6y ago
Awesome project. Consider adding in the demo automatic anchors on headers so one can quickly copy them for sharing. Currently they can only be obtained from ToC but you need to scroll to it. On anything larger then few pages, this is a must. One problem there is that current automatic id's are generated sequentially and not really user friendly for link sharing.
- abhinav22 6y ago
  I will look into this and add it in (if possible), please do check back in a couple of weeks (maximum). Would you be able to expand on what you mean (sorry I’m being dense), otherwise I will Google it tomorrow Thanks for the kind words
  - majkinetor 6y ago
    I mean links like this: https://majkinetor.github.io/mm-docs-template/#quick-start https://majkinetor.github.io/mm-docs-template/#quick-start If you go there, I can grab it hovering over header (↵ symbol to get permalink). It also shows nicely in the URL by combining words instead of generating sequence.
    - abhinav22 6y ago
      Thanks! I will look into and revert, please check the repo from time to time, I’ll create an open issue against it
raosl 6y ago
Is there any option to automatically trigger saving such PDF as a file?
raosl 6y ago
Is there an option to automatically trigger saving such PDF using JS?
gnicholas 6y ago
FYI typo on "foooters"
dang 6y ago
This is nice but it not a valid Show HN. Please read the rules: https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html
- abhinav22 6y ago
  Hi dang, hope you are well. May I kindly ask why not? I spent two weeks writing the CSS / HTML / JavaScript, and did well documented code - in fact the output serves as both documentation of the code and also output from it (in my own stupid way, I was thinking I was following Donald Knuth’s Literate Programming Approach :D). The repo (https://github.com/ashok-khanna/pdf https://github.com/ashok-khanna/pdf) contains all the necessary code and is intended for others to reuse in their projects. Some of it isn’t straightforward, despite the guide looking easy - I had to figure out how CSS selectors and counters work for example, how MathJax interacted with Paged.Js. I think the confusion comes from it being labeled as a “guide”, in fact it’s a full set of code to give the required functionality for high quality PDFs from HTML, using paged.js, the guide is just the self documentation as I figured I might as well use documentation for the sample output. Otherwise, I’d be genuinely curious on what constitutes Show HN vs normal posts? I think the repo description and the way the output is confusing / unclear - the primary goal is very much meant to be a code base for people to reuse as I’ve noticed for many programmers, the design side can be a bit more elusive. Separately, would it be possible to add beautiful back to the title - it’s not really about producing PDFs from html as browsers can already do that, and there are many other tools. The main aim is to have the functionality to produce very high quality typeset PDFs from HTML, which until now, I only felt PrinceXML did well and that’s a paid solution. Maybe we could say the title is “High quality PDFs from HTML using Paged.JS”? I know there has been a separate discussion on another thread on the overuse of the word beautiful in describing code - my view is that it has its place when it relates to output / UI. Thanks for reading, and no issues otherwise (no need to reply).
  - dang 6y ago
    Yes, I thought it was just reading material and didn't realize that you were sharing code. Sorry! Have restored "Show HN" now.
mjaniczek 6y ago
Actual content is nice! But the ToC ain't it, chief :) https://i.imgur.com/SRftzxv.png https://i.imgur.com/SRftzxv.png
- abhinav22 6y ago
  Thanks! Yes I know what you mean - it doesn’t work well in certain browsers, devices etc. Aimed at desktop users and Chrome in particular (I saw a bug in Safari version). The aim is less to be a readable pdf in-browser, but rather a high quality pdf after exporting to pdf. The in browser print preview is just a nice side effect (but I might actually reuse this for other projects as I like it quite a bit!). I think the issue with the toc is that it’s dynamically created; so while I was able to use responsive web design for the rest, it didn’t work so well for the toc. I’ll have a look at it though :) I think there may be a way to get it to work
aviraldg 6y ago
(Somewhat) related self-promotion: I've found that converting from HTML(+YAML) to PDF is one of the best ways to create a resume. It's very easy to come up with a good design, you can separate data (YAML) and presentation (HTML and CSS), and also export different views over the underlying data with simple filters (e.g. when generating a resume to apply to a job, only include the experiences that are relevant) The code is pretty terrible, but you can see an example (my resume) here: * Data - https://github.com/aviraldg/aviraldg.github.io/blob/master/_data/resume.yml https://github.com/aviraldg/aviraldg.github.io/blob/master/_... * HTML - https://github.com/aviraldg/aviraldg.github.io/blob/master/resume.html https://github.com/aviraldg/aviraldg.github.io/blob/master/r...
webwanderings 6y ago
This is cool. Exactly what I was looking for not too long ago (sometimes markdown does not fit all the needs for documentation). How about images? How do you handle images; their layout, scaling etc?
- abhinav22 6y ago
  Basically you can use CSS to manage their layout - dimensions, positioning, scaling, etc. Should work pretty well If you want floating images (e.g. text on the left, images on the right), it may be a bit more difficult and not perfectly possible. This guide will help: https://www.pagedjs.org/page-floats/ https://www.pagedjs.org/page-floats/ One tricky part is if you want to have text within images and have them the same size as your main text (eg in MS Word where you can have shapes and text boxes). For that, you can probably get close enough with a simple image load, and more precise by using svg graphics, but it may result in a reasonable amount of complexity to make perfect (if at all). For charts, use charts.js in my opinion.
honzajde 6y ago
Saved PDF (in Chrome) does not have a TOC as a side pane in Acrobat Reader. MIssing pretty important feature.
- makkesk8 6y ago
  The bookmarks feature of pdfs doesn't exist in chrome's pdf engine which means paged.js don't support it either last I checked. We solved this by post processing the pdf generated with paged.js + puppeteer with itextsharp (LGPL) to add the bookmarks. We captured the toc using the paged.js "after" hook and put that into a variable which our backend could then grab from puppeteer.
- abhinav22 6y ago
  Yes, that would be an advanced feature and I think likely out of the scope for paged.js. That said the table of contents page is hyperlinked - you can jump to sections, and I put a return to table of contents in the footer to aide with navigation. Hopefully that helps?
anonu 6y ago
This is one of the hardest problems we face as a financial research platform. We have a lot of financial data in tables along with line, bar and pie charts. Coming up with something sensible and readable is a bit harder than expected. Ultimately we have a "json to latex" converter we built but it's not great...
- smt88 6y ago
  We have been using PDF2XL[1] for this for years (used to be called CogniView). It's genuinely unbelievable. If the PDF isn't sufficiently structured, it has OCR that seems to "just work". You can also automate the extraction and integrate it into your pipeline. The UI is pretty old and ugly-looking, but it is one of the few apps I've used in the last 10 years that made me feel genuine delight. 1. https://pdf2xl.com https://pdf2xl.com
- burmanm 6y ago
  Anything wrong with XSL-FO? I know it's not the hottest thing on earth, but it works. Apache FOP is still developed and it's easy to add it to a pipeline.
  - TimTheTinker 6y ago
    It's a lot harder to work with than an HTML template and a CSS file.
- abhinav22 6y ago
  I work in financial reporting, doing very similar things to what you mentioned here. Mind dropping me an email at Ashok.khanna@hotmail.com and we could discuss further? Would love to chat to others facing similar dilemmas :)
- LaundroMat 6y ago
  Maybe Vega and its Figures for Papers can help? https://vega.github.io/vega-lite/tutorials/figures.html https://vega.github.io/vega-lite/tutorials/figures.html
- TimTheTinker 6y ago
frongpik 6y ago
Add to this a pdf to html converter, with a focus on official forms (e.g. irs tax forms), ability to easily edit fields and add signatures (similar to how the free android adobe app does it), and you can charge money for it.
- abhinav22 6y ago
  Thanks - indeed there is likely a market for it. One of the issues is that to get a commercial app, you have to solve for most of the edge cases and make sure it has a good enough UI for the non sophisticated. I was thinking about doing it, but it would be a lot of work to do right. By right, I would want it to be the quality of sublime or emacs / vim :) :)
  - frongpik 6y ago
    You'd essentially have a pdf editor that can import a pdf, edit it and export the html back to pdf. Working with official forms is one usecase. Another is an iframe that can preview pdfs without resorting to plugins.
    - abhinav22 6y ago
      Indeed - that makes a lot of sense
  - frongpik 6y ago
    Actually, there's one more usecase for a html to pdf converter: making a book-style copy of a multipage website. I'm looking right now at a scientific site with content spread over multiple pages and it's tiring to find and click all the links to make sure I don't miss anything.
buovjaga 6y ago
I tried out paged.js recently for a genealogical report exported from Gramps, but I had to use PrinceXML because counter-reset to start at a page does not work: https://gitlab.pagedmedia.org/tools/pagedjs/issues/91 https://gitlab.pagedmedia.org/tools/pagedjs/issues/91 Apart from this feature everything worked fine.
- abhinav22 6y ago
  Do you have a repo I could play around with? I had the same issue, but for my use case I figured a work around - primarily by using classes. I could spend a few minutes and see if I can get it working for you. But yes, it’s a deficiency in the system currently
  - julientaq 6y ago
    I would be happy to see it too. Reset page number using counter is working: https://codepen.io/julientaq/details/MWammZV https://codepen.io/julientaq/details/MWammZV The property needs to be set to the element, and not to the @page. But we may have missed a bug though, so i’ll be happy to check your code.
  - buovjaga 6y ago
    Sorry, I forgot to check replies! This is the CSS: #grampstextdoc { counter-reset: page 7; } @page { margin: 2cm 3cm; @bottom-center { content: counter(page); } }
doersino 6y ago
There's also Bindery, a JavaScript library for book creation which also leverages the print-to-PDF feature built into modern browsers: https://evanbrooks.info/bindery/ https://evanbrooks.info/bindery/ On top of that and the in-browser Markdown renderer Markdeep, I've built a tool for typesetting undergraduate theses: https://github.com/doersino/markdeep-thesis/ https://github.com/doersino/markdeep-thesis/ And, coincidentally, just a few days ago I've written a blog post about controlling the settings in Chrome's "Print" dialogue with CSS (other browsers don't support many of the relevant features): https://excessivelyadequate.com/posts/print.html https://excessivelyadequate.com/posts/print.html
- austinjp 6y ago
  Oh these are great, and I hadn't known of markdeep. Thank you! FWIW, my toolchain is currently markdown files in folders. I pre-pend 000-format numbers to file/dir names so they're assorted by ls or tree. Rendering is a bash script that runs pp first, since files include others using !include(), producing a single .md in /tmp. The mighty pandoc of course, to produce a Word doc, which is then the basis for all further rendering. HTML and plaintext are generated from that with pandoc. I was using pandoc to produce PDFs, but switched to calling libreoffice headless to generate PDF from the Word doc, since this seems to match formatting most closely. Sounds fussy, but it's a few lines of bash, fairly reliable and reasonably rapid. One outstanding issue is tables. The Word doc always requires reformatting tables for column width, flow, etc. I can't seem to get pandoc to carry the styles effectively from a custom reference.docx file. I'm looking at ways to render tables separately, format by hand, then include them into the main doc later.
synergy20 6y ago
PDF is elegant on my eyes. To make it a web surfing experience for me it lacks one thing here, that I need the TOC on the left or right side so I can click and jump to various section quickly.
- abhinav22 6y ago
  The table of contents is itself hyperlinked. And at the bottom of each page is a link to return to the table of contents. Let me know if that works well?
  - synergy20 6y ago
    yes that helps a lot, a toc on the side will be even better but toc hyperlink is good enough for now. Thanks!
    - abhinav22 6y ago
      Thanks!
brightball 6y ago
My question on these is always how it handles multi page documents. Most DOM and CSS approaches to HTML to PDF require it to fully render everything for placement before it can convert. If you have to render something big, like a 300 page member directory for example, the approach will blow up.
- idreyn 6y ago
  I used paged.js in production and while it's definitely not fast enough to run during an HTTP request, it can render a 300 page document reasonably quickly, definitely within the 120 second TTL of our worker tasks. It can be quite finicky though and sometimes stalls on things like images that are taller than a single page.
  - brightball 6y ago
    The RAM upper limit is my bigger concern.
    - julientaq 6y ago
      www.booksprints.net people made 700 pages (which makes a lot of div to handle and process) without too much issues. And you can also check https://villachiragan.saintraymond.toulouse.fr/impression https://villachiragan.saintraymond.toulouse.fr/impression to see HD images. Both went straight to the printshop.
axlee 6y ago
What is your favourite library for printing HTML to PDF?
- airstrike 6y ago
  https://pandoc.org/ https://pandoc.org/ + something like pdflatex
ChuckMcM 6y ago
This is very nice. I keep wondering when we'll see a resurgence of magazines which use a system like this.
kartoshechka 6y ago
It should be the other way. PDF ought to die and let documents be parsable
runxel 6y ago
For anybody working with pandoc you should try Weasyprint [0]. [0]: https://weasyprint.org/ https://weasyprint.org/
- sonthonax 6y ago
  Weasyprint is great, but be prepared to start hacking its layout engine for more complex generations. It's nowhere near as mature as PrinceXML.
  - runxel 6y ago
    True, it sometimes can get messy to get a decent output. But the dev team behind is currently working on replacing Cairo with a custom Python solution as layouting engine. This will hopefully solve a lot of headaches down the road. Sure, PrinceXML is unmatched. Same goes for the price tag. I know professional CAD software which costs less. Really not doable for smaller offices e.g. Its astonishing that there is no real, great open source alternative for this. Don't get me wrong, Weasyprint is great, but has _a lot_ of dependencies and is a nightmare to install on Windows. Works decent on WSL, tho.
    - adamjhyde 6y ago
      You need to try pagedjs. Which is kinda what this thread is all about.
      - runxel 6y ago
        Maybe I am missing something very obvious, but how do I get a PDF out of it in an automated way? That's what I like about pandoc + weasyprint. I just have a plain ol' markdown document and I receive a nice PDF in an instant. Just like that, super easy.
        adamjhyde 6y ago
        you can run the command line version. so in your scenario pandoc-> html, pagedjs cli -> PDF
sonthonax 6y ago
By using a W3C standard and devolving the layout engine to the browser, this solves a difficult problem the right way. I would have loved to have something like this for a project years ago.
- abhinav22 6y ago
  It really does. The team at paged.js are simply amazing and deserve so much credit. It’s such a big deficiency in the modern web, we really need Chrome / Safari / etc to implement the W3C standard or something better
TedDoesntTalk 6y ago
I’ve been looking for a way to convert Wordpress blogs to PDF. There are Wordpress plugins for this but I have not found any that work well. Can this be integrated with Wordpress?
- abhinav22 6y ago
  Should be able to - somebody with intermediate Wordpress knowledge (unfortunately I don’t know php) should be able to integrate within a day in my opinion, based on my understanding of web development
janandonly 6y ago
I love "printing" webpages to PDF files. I've been doing this for more than 15 years. I delete most of the images first so that I end up with files of 50-500KB. I then store said file in appropriate labeled directories. Now 15 years later I have a private stash of websites and wikipedia articles that I can consult by simply pressing command+spacebar (the files are indexed in MacOS search). To make a PDF file out of a website I currently use Printfriendly.com, but it wasn't always this way. Back in the days I loved to use Arc90's Readability (a firefox extension). I don't know what happend to that extension though, there are plenty of old HN articles about that Wonderfull plug-in though: Post from 2010, probably I started using it right after finding this post... https://news.ycombinator.com/item?id=1153343 https://news.ycombinator.com/item?id=1153343 https://news.ycombinator.com/item?id=3246081 https://news.ycombinator.com/item?id=3246081 https://news.ycombinator.com/item?id=3243097 https://news.ycombinator.com/item?id=3243097 My joy knows no bounds !! I actually ducked for "What happend to arc90.com ?" and found as the 7th item in the list this website: https://ejucovy.github.io/readability/ https://ejucovy.github.io/readability/ It still hosts a working version !!! Okay kids uses these settings and thank me later: * Style: Athelas * size: small * Margin: narrow * Convert hyperlinks to footnotes Whenever a pages is worthy of saving, press the button for Readability and pres ctrl+P and save to PDF... that's it.
- VelNZ 6y ago
  That's a really interesting workflow, thanks for sharing!
hda111 6y ago
I would prefer if it was a single page like iOS does it when a screenshot of a webpage is made where it offers to export a PDF with everything.
dukeofdoom 6y ago
Adobe makes it harder and harder to use their PDF reader. I live in Canada, and somehow I'm given forms I legally have to use, that I can only print out in adobe reader v10. I need to go through hassle of installing and uninstalling their terrible product couple times a year.
wyck 6y ago
The Achilles heel pf PDF's are they don't have responsive layouts. It's so bad the Adobe team created an AI to resize layouts, yes an AI in the cloud, available only on the Adobe app. How insanely bad is your file format that you need an AI to resize layouts in 2021? If anyone has had to handle layouts programmatically I'd think they would agree that PDF's are the most outdated ass backwards file format in existence.
- necovek 6y ago
  PDF is an attempt at non-Turing complete, simpler PostScript (PS). It comes from a time of paged media de facto ruling the world. Changing layouts was never the goal, because PDF was the output format. In case of academic research papers typeset with LaTeX, the source file is something you'd likely want to consider the semantic equivalent of HTML. TeX should be able to render the same document with different output constraints ("responsive layout"), but because of the architecture (TeX itself is fully Turing complete), it is pretty slow at re-rendering an entire document. Part of the allure of a static document format like PDF is that you can, in theory, fetch just page 454 of 6000 page document and render that: with HTML, just like with TeX, you'd have to get and render the entire document to be certain that the layout won't change after you've processed the whole file.
  - wyck 6y ago
    I'm aware of the history, in the same context of why it not a good idea to use a steam engine in a train anymore
- dredmorbius 6y ago
  This is a feature. The option to specify the target output size / dimensions at generation time is a reasonable option --- ISO A4 / US Letter, perhaps a target for smaller devices (though a 6"--7"+ tablet should be able to present most reasonably-formatted PDF documents reasonably legibly). For anything smaller, PDF isn't really well-suited, and your better option is to go with a fluid-layout format such as ePub, .mobi, or, yes, HTML. Having largely switched to bookreaders (eInk tablets), in large format with ~300 DPI grayscale screens, I strongly prefer fixed-layout formats such as PDF and DJVU to fluid-layout formats, for the spatial/cognitive reasons many others have mentioned in this thread.
GrumpyNl 6y ago
There should be a button on there that converts the site to a pdf.
- dredmorbius 6y ago
  Some sites have this, notably Wikipedia and Wikisource, with the option to save as HTML, PDF, and ePub, generally. Occasionally other formats.
asaibx 6y ago
This looks great -- well done! I'd love to be able to use it (the CSS in particular) in a number of different projects where creating such nice readable output is a hassle. However I couldn't find a license mentioned anywhere -- either for the associated repo as a whole [0] or the CSS specifically. Would it be possible to add a license so it's possible to know whether others can use this in other projects without rewriting the CSS from scratch? [0]: https://github.com/ashok-khanna/pdf https://github.com/ashok-khanna/pdf
- abhinav22 6y ago
  Thanks :) It’s all free, I will figure out how to add the license tomorrow as I don’t know what’s the right one - basically don’t want people to have any issues with GPL so if I understand then MIT is the right one? Also paged.js is the property of their team, together with the script of toc.js whilst MathJax is the property of their team too. Have to figure out how to word it. But if anyone is reading in the meantime, it is open source, no need to attribute anything back to me for my parts. If you are using the text of the guide, you could mention my name, but don’t sweat it either - it wasn’t particularly involved in terms of writing (the hard part was choosing which parts to write about so it’s not too complex but also not too barebone).
  - adamjhyde 6y ago
    Hi, Adam here from Pagedjs. Pagedjs is MIT. Mathjax is Apache 2.0 and isn't part of our work :) Wonderful as it is...we can't claim credit for it! (We Love MathJax - https://github.com/MathJax/MathJax https://github.com/MathJax/MathJax)
    - abhinav22 6y ago
      Thanks Adam! I know I come across as one of the biggest fans of paged.js, but it’s such an inspirational project! The idea to polyfill the required functionality for CSS Print Rules is pure genius, as somebody who looked at all the alternatives. It’s a great example of thinking outside the box. Thanks again!!
- 6y ago
TimTheTinker 6y ago
If you'd like to typeset HTML/CSS documents (with optional PDF-specific CSS blocks to handle page layout, numbering, header/footer, etc.), then I'd highly recommend Prince: https://www.princexml.com/ https://www.princexml.com/ It's a typesetting-specific layout engine that supports HTML, CSS, JS, and even styled XML if that's your thing. It independently developed support for all the latest standards... it's not free but it's very good. The inventor of CSS, Håkon Wium Lie, is one of the product's developers. I used it on an app a while back to add a PDF export feature to a web app... couldn't speak more highly of Prince.
- kumarvvr 6y ago
  Wow, this is incredibly expensive. I don't mean to say it is not worth it. I have a problem at work that requires highly dynamic content to be generated and output to pdf files. Right now, I am using excel template documents. I would love to use open technologies to do the same. Not able to find anything so far that is as flexible and user friendly. The closest alternative is to use OpenOffice Calc documents.
  - abhinav22 6y ago
    Try the HTML / CSS / Paged.js workflow with headless chrome - I think it works really well (and open source / free with the exception of Chrome, where you are a bit at the mercy of Google, but they are unlikely to make any breaking changes in my opinion)
  - earthboundkid 6y ago
    Prince is so good. I wrote everything I did in grad school with Prince. It’s expensive because it’s aimed at audiences that can afford to pay for good typography.
    - benrbray 6y ago
      Uh, I don't know many grad students willing to blow US$495 on software like this when they can just use a combination of Overleaf / Jupyter / RMarkdown.
edwr 6y ago
I'm very confused with the PDF appreciation comments. I have to read lots of PDF textbooks and reference documents for school and the experience is grating, especially trying to navigate a document with upwards of 1000 pages on the Chrome PDF reader or Adobe Acrobat on a laptop. Trying to manipulate a tiny scrollbar with a laptop touchpad is very frustrating and using gesture scrolling is tedious for a large document when you have to flip around to various pages. Perhaps I've been doing something wrong, any thoughts?
- rzwitserloot 6y ago
  Feels very much like a channeling of Churchill's 'Democracy is the worst form of government' ditty, except as applied to HTML and PDF. PDF is horrible. But it's not 'as horrible' as HTML (with the rather loomingly large caveat that this is has very little to do with the formats and everything to do with what your average HTML dev ends up making, and only applies to the job of reading significant chunks of in-depth materials). As a format, yes, what the fuck is everybody talking about? PDF is a disaster and should be killed off, HTML is great.
- kumarvvr 6y ago
  PDFs look and are made to feel like actual books. I see that as the primary reason for people being comfortable with PDFs. Even if their readers are buggy. Consider the alternatives. HTML, too much re-rendering and re-formatting. Word - Oh No. Not in a million lives. Have you seen the atrocity that is the "reading mode" in Word? Epub / Mobi / Etc - I have never come across good readers. For what its worth, PDFs are great for reading on larger screens like iPads. I read them on my mobile too, but that's not good for long reads.
- dredmorbius 6y ago
  Get a dedicated ebook reader if you can. The price is pretty reasonable up to about 7-8", and not too high to 10". I splurged for 13" as I read a lot and often low-quality scans of small, three-column print. The pixel density of an ebook reader (200-300 DPI) is far higher than even Retina displays. Monocrome/greyscale gives higher resolution as well (the three-elements-per-pel aspect of colour displays means you're always left with about 30% the effective resolution, though subpixel aliasing helps a lot). Portrait will display a single page well (laptop displays suck for reading text), and for larger devices or larger-print materials, you can often manage a two-page-up display.
deedubaya 6y ago
I built, use, and maintain https://github.com/danielwestendorf/breezy-pdf-lite https://github.com/danielwestendorf/breezy-pdf-lite which uses Chrome to convert html to PDF’s as a web service. Maybe someone here will find it useful!
zakki 6y ago
Looks perfect when I saved it to PDF using File->Print menu on Safari. But it is exported to single long PDF page when doing it from File->Export as PDF.
MilStdJunkie 6y ago
Asciidoctor has a web PDF tool that just went alpha a little bit ago, uses the same stack as the OP's thingie. https://github.com/Mogztter/asciidoctor-web-pdf https://github.com/Mogztter/asciidoctor-web-pdf The content handoff goes like this: Asciidoc (using defined roles) generates HTML5 (Paged<dot>js polyfills page areas / pagination stuff), CSS styles stuff, and Puppeteer runs a headless Chromium for the pdf render. It's straight from CSS GCPM W3C spec, a flavor of CSS Paged Media, drafts that have been percolating since frickin' 2006 but have never seen browser implementation. The beauty of this is that you use the same CSS for web and PDF deliverables. Actually, the even better beauty is that you are using two dirt-common technology stacks - CSS and Javascript - instead of XSL or Prawn or some ancient bespoke layout language. With Asciidoctor, for complex print requirements you're going to be forced to either 1) DocBook-XSL via fopub or 2) DocBook-LaTeX via dblatex. The native Prawn-based PDF tool isn't capable of a whole lot of customization without extensions. So web-pdf is a real shot in the arm for those of us that aren't real keen on going back into XSL-FO.
- adamjhyde 6y ago
  also using pagedjs :) awesome!
  - MilStdJunkie 6y ago
    Yeah, in the Python world there's WeasyPrint for PDF out in the wild as well. It's quite slick, but it's a harder sell because of Python, which corporate types seem to think is bad hacker central. https://github.com/Kozea/WeasyPrint https://github.com/Kozea/WeasyPrint
- gorgoiler 6y ago
  Amazing news, thank you for sharing. Prawn’s pure ruby implementation of image layout makes it too slow for the graphics heavy technical manuals I write (though I haven’t used asciidoctor-pdf in 12 months.) I ended up drafting documents with 10dpi images just to get it to render quickly enough for layout but even then, adding images turned a 100ms render into a 6000ms render. Hopefully this problem goes away with a fast web based stack. I’ve never had much luck with break-after/before:avoid for <h2>. I hope their css or paged.js works for avoiding this common fault.
aforwardslash 6y ago
Shameless plug - https://github.com/zipreport https://github.com/zipreport OSS Python library to generate PDF reports from HTML, using pagedjs. Uses Jinja templates, supports runtime-generated images, client-side JS, and reports are bundled as a single file.
- abhinav22 6y ago
  Anything with paged.js makes me an auto fan :) This could be very interesting for those with Python workflows, thanks for sharing
totorovirus 6y ago
Is there any HTML from PDF available?
reubens 6y ago
I love this. Typo FWIW on page 8: "You want to select the print background option and delect the print headers & footers option."
- abhinav22 6y ago
  Thanks! :) Will fix it after work.
gulzhana_sweet 6y ago
thank you for bringing value to the world and supporting free things! i think without pdfs in new era of lockdowns we cant proceed anymore online activities where pdf now is new passport - pass by ticket to anything! just have to keep my eye on phone battery
- Abhinav2000 6y ago
  Your welcome
papa_bear 6y ago
Can anyone speak to how this compares with something like wkhtmltopdf? That's what I've been using, and this is my first time hearing about PrinceXML too. I generate some HTML for the user, they can edit it with a rich text editor like TinyMCE, and then we export to PDF on the server side. Wkhtmltopdf is pretty barebones on the style/feature side though, so this looks worth investigating.
- abhinav22 6y ago
  From my limited experience with wkhtmltopdf, a solution based on paged.js should work better But maybe that’s because I didn’t fully learn wkhtmltopdf PrinceXML is very good but is a paid solution. I found paged.js, at least for my purposes, on par with PrinceXML
  - papa_bear 6y ago
    Interesting, thanks for the input!
pseingatl 6y ago
I don't understand why so many people think "pdf" automatically means "A4" or "letter size" document. PDF's are size agnostic. Storage is cheap and so is processing power. A phone-sized pdf will be 20 mb instead of 1 mb, but so what? It's a small price to pay for quality typesetting. Similarly, pdf's can be sized for the now typical 16:9 laptop screen.
- ospider 6y ago
  Because 99 percent* of PDF is A4 sized. * From my observation and guess.
busymom0 6y ago
I was looking for something similar recently and I ended up using jsPDF for my ResumeToPDF site and it worked pretty well. Only thing I sort of had pain with was that I had to include SVG icons in-line in the html/javascript and had to convert them to base64 to be included in the PDF. And same thing for the custom fonts - I had to include base64 of the font TTFs to be embedded in the PDF: https://resumetopdf.com https://resumetopdf.com https://github.com/MrRio/jsPDF https://github.com/MrRio/jsPDF
- jtbayly 6y ago
  Can you point me to something that explains how to do what you did (embedding the base64 of the font TTF)? I'm wondering how I can make a PDF of a webpage use the same font I used on the webpage. Edit: Never mind. I found the instructions on one of your links: https://github.com/MrRio/jsPDF#use-of-unicode-characters--utf-8 https://github.com/MrRio/jsPDF#use-of-unicode-characters--ut...
  - busymom0 6y ago
    In case you are still stuck, here's what I do. If you have questions about this, email me using the "Send Feedback" from my site. I serve the base64 of each weight and style (normal, normal italic, bold, bold italic) inside a JSON. Here's one example of the JSON I serve for the Open Sans family: https://resumetopdf.com/fonts/OpenSans.json https://resumetopdf.com/fonts/OpenSans.json And here's me embedding it and making it available to jsPDF. NOTE the font.replaceAll to remove white spaces from the font name when embedding. jsPDF has this bug (or maybe expected behavior where it can't handle white spaces in the font name): var fontBase64 = {} const doc = new jspdf.jsPDF({ orientation: 'p', unit: 'mm', format: currentresume.size, putOnlyUsedFonts: true, }) const fontsToEmbed = [currentresume.headingfont, currentresume.bodyfont]; for (font of fontsToEmbed) { const fontName = font.replaceAll(' ', '') if (!doesExist(fontBase64[fontName])) { let response = await fetch(`https://resumetopdf.com/fonts/${fontName}.json`) let data = await response.json() fontBase64[fontName] = data } Object.keys(fontBase64[fontName]).forEach(style => { doc.addFileToVFS(`${fontName}-${style}.ttf`, fontBase64[fontName][style]) doc.addFont(`${fontName}-${style}.ttf`, fontName, style) }) } Once added to jsPDF, later on you can set the font and style, weight etc: doc.setFontSize(originalFontSizeInPt) doc.setFont(fontFamily, fontStyle) Also the JSON with base64 of font families is served over CloudFlare with an infinite cache - this prevents any costs on my end and also speeds up the user experience when they return to the page.
austinjp 6y ago
Similar to some others here, I have folders full of PDFs. I recently discovered Recoll, which is great for searching them. Fuzzy search of contents as well as filenames. https://www.lesbonscomptes.com/recoll/ https://www.lesbonscomptes.com/recoll/ As well as this, I have a script which find all .pdf files without a corresponding .txt file, then generates one with pdftotext. Really handy, I can then easily grep -ril or ag -til for contents. One gotcha: the text files have line breaks, meaning matches don't always work.
- majkinetor 6y ago
  There is also dnGrep for Windows which does much more: https://dngrep.github.io/ https://dngrep.github.io/
jl6 6y ago
PDFs are great and I now publish my website exclusively in PDF/A, not HTML. I have many reasons, but top of the list is that PDFs put the user in control, whereas HTML is now firmly the agent of the publisher.
- edeion 6y ago
  What do you mean publish your website in PDF/A? Is your frontpage a PDF document linking other PDFs? Ha! Just checked you account and indeed that's what you do... I'm not sure I like to acknowledge the sense of failed HTML but your pages look good and there's no javascript nonsense in the background.
- mro_name 6y ago
  lol, but not my humour.
mro_name 6y ago
for simple things, like e.g. a resume with only a few pages you don't need any tool at all. Just write html + a bit of css (no 3rd-party complexity!) and print it (to pdf). Done (assuming you won't apply as a print designer)
thatguyagain 6y ago
It's absolutely fascinating how much attention "x to PDF" or "PDF to x" draws still. I use and struggle with this on a daily basis, been trying to build my solutions but never really got there. It's still an issue people are willing to pay to solve in the best way possible for their use case.
- Abhinav2000 6y ago
  There's definitely a market for it!
jhiggins777 6y ago
Another great option is https://www.pdfmonkey.io https://www.pdfmonkey.io. They're also wired up in zapier.
sharikous 6y ago
fds
sharikous 6y ago
For me, the best way to read something is a media that is limited in the x direction but has no page limits and can go down as needed. Like most of the websites. Foldable sections, hyperlinks and floating TOCs, are a bonus too. This is ideal for reading from a tablet or from a desktop and is somewhat printable too, Unfortunately most tools for producing PDFs from HTMLs assume you want to divide them into pages, and there is no easily produceable "reading format" as widely adopted as PDF. Those page cuts are so annoying when you read from digital media.
littlehodlboy 6y ago
Is it possible to add functionality to make the page up/down buttons scroll a full page?
- Abhinav2000 6y ago
  Might be difficult but will have a look

742 points by abhinav22 6y ago

john-doe 6y ago

Great paged.js tutorial, thank you for publishing it.

abhinav22 6y ago
Thank you! Paged.js is really such an awesome tool. I was searching for many weeks for something like this, so I really think the word needs to get out there more. It could significantly improve the workflows of many people who are self writing / self publishing as it opens up the power of CSS and HTML (which allows to nicely defined formatting templates and use code to automate content generation) to pdf reports (which I think has its place). I haven’t used pandoc, but I think a HTML/CSS/Paged.js workflow could challenge it. At work I’m already converting many processes to it - I have a database of content and then use SQL queries to extract data and then generate beautiful PDFs through paged.js. It also works well with mathematical typesetting (via MathJax).

hu3 6y ago

Are there any report generation libraries built on top of page.js? I've been looking for report generation solution based on frontend technology. Btw. This is great. Thanks for sharing.

nojito 6y ago
Yup. I use pagedown all the time. https://pagedown.rbind.io/ https://pagedown.rbind.io/
- adamjhyde 6y ago
  In case you missed it, pagedown implements pagedjs afaik
abhinav22 6y ago
Thanks for your kind words. Would you be able to expand on what you mean by “report generation libraries”? For example, I am building (in Common Lisp, but it’s trivial and can be done in any software) a tool to read content from a database and auto generate the HTML markup for producing pdf reports. This allows me to reuse content across reports and also leverage the full power of databases (text search in particular). As another example, I have many monthly financial metrics - I will store these in a database then use my lisp markup tool to generate the necessary HTML to produce the pdf report (via paged.js). In addition, one can use headless chrome to automate the full workflow so that the reports are generated directly from your program and not via File > Print in your browser. Was that what you were thinking of? You can also add charts via charts.js. The beauty of paged.js is that you can leverage many of the features of browsers and JavaScript libraries in your report generation. I wasn’t able to get syntax highlighting for code blocks to work however, need to dig into that a bit more.
- hu3 6y ago
  > Was that what you were thinking of? Yes! This is great. Thanks for the pointers. I'll look into that.
dreix 6y ago
I started generating PDF before pagedjs and use my own electron based solution. Search for schild.report on github to see how it works. Basically reports are created via svelte templates and then printed via the electron print api. Works extremely well.
aforwardslash 6y ago
I've built a python library called ZipReport to manage and generate PDF reports from HTML using paged.js - https://github.com/zipreport https://github.com/zipreport The actual PDF generation component is an electron application, so it may fit your "frontend technology" requirement.

exhilaration 6y ago

Does anyone know how this compares to PrinceXML / DocRapotor? We pay them big bucks for PDF generation (invoices specifically) and so far we haven't found anything comparable.

Semaphor 6y ago
Not sure about paged.js, but we use Weasyprint for invoices. It isn’t as advanced as some of the paid options (most annoyingly page headers are somewhat hacky) but it works very well. My go-to for everything CSS Paged Media is [0] which has a nice comparison of supported features at [1]. They recently added Weasyprint, PagedJS and Typeset.sh [0]: https://css.paged.media/ https://css.paged.media/ [1]: https://css.paged.media/lessons https://css.paged.media/lessons
abhinav22 6y ago
I was a huge supporter of PrinceXML / DocRaptor for precisely the same reason - all the alternatives (that I knew at the time) were not good. Paged.js was a revelation (thanks to HN for telling me about it!). It is based off CSS Print Specifications like PrinceXML (as is my understanding - I’m about 95% sure), and to me it’s even better because it utilizes all the other front end technologies directly from your browser - I think there are some use cases where PrinceXML won’t be able to get the same functionality. For invoices, I think you should be able to easily switch over. Based on what I can see.
cdolan 6y ago
I also pay a lot per month to DocRaptor and they’ve been very reliable to date, but unless I’m rendering charts with JS I feel like I’m really overspending
zulko 6y ago
A few years ago I started an alternative to PrinceXML called ReLaXed.js [1], it's always been sufficient for my reports but it may lack some pagination/layout features that Paged.js may have as they seem to have given this much more thoughts (still wrapping my head around whether paged.js could be "plugged into" Relaxed). [1] https://github.com/RelaxedJS/ReLaXed https://github.com/RelaxedJS/ReLaXed

systemvoltage 6y ago

There is something really pleasing about reading PDFs. It’s perhaps how static it is and it won’t change on me. I can zoom in or “operate” on it without some reorganization. It puts the mind to ease. There is no reflowing. There is no columns shifting. It’s just is. Like a piece of paper as an analog - the intent of the author and the designer is retained and frozen in time. Fonts are embedded and chosen by the creator. Haters of PDFs do not understand the human aspects of it - they just see it as a specification (which is convoluted).

maga 6y ago
Maybe it's simply a force of habit at this point, but I can only read/study/memorize technical stuff from PDF/paginated source--I memorize the overall "picture" of the page and it's location along with the bits I actually need, and it's really tough to do with non-paginated sources.
- Nullabillity 6y ago
  Sounds like scrolling is actually a positive then, by forcing you to focus on understanding the content rather than relying on rote memorization.
  - dredmorbius 6y ago
    Spatial memory is not rote memorisation. https://en.wikipedia.org/wiki/Method_of_loci https://en.wikipedia.org/wiki/Method_of_loci
    - Nullabillity 6y ago
      Not sure what you're trying to say, that article pretty much only talks about its applicability to (inherently rote) memorization contests. It doesn't say _anything_ about meaningfully integrating the information as knowledge. Which also seems to align with the article's description of how it works: you're not trying to figure out the underlying structure of what's going on, you're making up a new structure as you go based on the surface-level patterns.

mywacaday 6y ago

The section numbers in the table of contents are over writing the text, maybe not so beautiful.

abhinav22 6y ago
Thanks for flagging. It’s aimed for desktop users and a reasonable size screen (eg A4 or so), it’s not really a responsive design as it’s meant to be a tool to generate PDFs. So it won’t work in some browser dimensions (the paged.js code is reasonably complex). That said it works in iOS as far as I can test. For some reason page numbers in table of contents not working perfectly in Safari but Chrome works pretty well. I guess the conclusion is that this is aimed somewhat to desktop Chrome users as a specific tool for pdf generation.
- Tomte 6y ago
  I'm seeing all page numbers as 0 in the TOC on iPadOS.
  - abhinav22 6y ago
    Yep - looks like Chrome only gets those right. I will speak to the paged.js guys and see where the bug is in the code. Rest seems to work on Safari - let me know if any other issues and I’ll fix / update accordingly
- mywacaday 6y ago
  I'm in chrome on a Samsung note 10+. If you want to add contact details somewhere I'll send you a screenshot and do a test when you're ready.

sunjester 6y ago

mobile friendly?

abhinav22 6y ago
No, it’s more for pdf production from desktop. The print preview on the example web page works on iPhone and browsers but the aim is really for pdf and not for consumption via mobile etc

majkinetor 6y ago

Awesome project. Consider adding in the demo automatic anchors on headers so one can quickly copy them for sharing. Currently they can only be obtained from ToC but you need to scroll to it. On anything larger then few pages, this is a must. One problem there is that current automatic id's are generated sequentially and not really user friendly for link sharing.

abhinav22 6y ago
I will look into this and add it in (if possible), please do check back in a couple of weeks (maximum). Would you be able to expand on what you mean (sorry I’m being dense), otherwise I will Google it tomorrow Thanks for the kind words
- majkinetor 6y ago
  I mean links like this: https://majkinetor.github.io/mm-docs-template/#quick-start https://majkinetor.github.io/mm-docs-template/#quick-start If you go there, I can grab it hovering over header (↵ symbol to get permalink). It also shows nicely in the URL by combining words instead of generating sequence.
  - abhinav22 6y ago
    Thanks! I will look into and revert, please check the repo from time to time, I’ll create an open issue against it

raosl 6y ago

Is there any option to automatically trigger saving such PDF as a file?

raosl 6y ago

Is there an option to automatically trigger saving such PDF using JS?

gnicholas 6y ago

FYI typo on "foooters"

dang 6y ago

This is nice but it not a valid Show HN. Please read the rules: https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html

abhinav22 6y ago
Hi dang, hope you are well. May I kindly ask why not? I spent two weeks writing the CSS / HTML / JavaScript, and did well documented code - in fact the output serves as both documentation of the code and also output from it (in my own stupid way, I was thinking I was following Donald Knuth’s Literate Programming Approach :D). The repo (https://github.com/ashok-khanna/pdf https://github.com/ashok-khanna/pdf) contains all the necessary code and is intended for others to reuse in their projects. Some of it isn’t straightforward, despite the guide looking easy - I had to figure out how CSS selectors and counters work for example, how MathJax interacted with Paged.Js. I think the confusion comes from it being labeled as a “guide”, in fact it’s a full set of code to give the required functionality for high quality PDFs from HTML, using paged.js, the guide is just the self documentation as I figured I might as well use documentation for the sample output. Otherwise, I’d be genuinely curious on what constitutes Show HN vs normal posts? I think the repo description and the way the output is confusing / unclear - the primary goal is very much meant to be a code base for people to reuse as I’ve noticed for many programmers, the design side can be a bit more elusive. Separately, would it be possible to add beautiful back to the title - it’s not really about producing PDFs from html as browsers can already do that, and there are many other tools. The main aim is to have the functionality to produce very high quality typeset PDFs from HTML, which until now, I only felt PrinceXML did well and that’s a paid solution. Maybe we could say the title is “High quality PDFs from HTML using Paged.JS”? I know there has been a separate discussion on another thread on the overuse of the word beautiful in describing code - my view is that it has its place when it relates to output / UI. Thanks for reading, and no issues otherwise (no need to reply).
- dang 6y ago
  Yes, I thought it was just reading material and didn't realize that you were sharing code. Sorry! Have restored "Show HN" now.

mjaniczek 6y ago

Actual content is nice! But the ToC ain't it, chief :) https://i.imgur.com/SRftzxv.png https://i.imgur.com/SRftzxv.png

abhinav22 6y ago
Thanks! Yes I know what you mean - it doesn’t work well in certain browsers, devices etc. Aimed at desktop users and Chrome in particular (I saw a bug in Safari version). The aim is less to be a readable pdf in-browser, but rather a high quality pdf after exporting to pdf. The in browser print preview is just a nice side effect (but I might actually reuse this for other projects as I like it quite a bit!). I think the issue with the toc is that it’s dynamically created; so while I was able to use responsive web design for the rest, it didn’t work so well for the toc. I’ll have a look at it though :) I think there may be a way to get it to work

aviraldg 6y ago

(Somewhat) related self-promotion: I've found that converting from HTML(+YAML) to PDF is one of the best ways to create a resume. It's very easy to come up with a good design, you can separate data (YAML) and presentation (HTML and CSS), and also export different views over the underlying data with simple filters (e.g. when generating a resume to apply to a job, only include the experiences that are relevant) The code is pretty terrible, but you can see an example (my resume) here: * Data - https://github.com/aviraldg/aviraldg.github.io/blob/master/_data/resume.yml https://github.com/aviraldg/aviraldg.github.io/blob/master/_... * HTML - https://github.com/aviraldg/aviraldg.github.io/blob/master/resume.html https://github.com/aviraldg/aviraldg.github.io/blob/master/r...

webwanderings 6y ago

This is cool. Exactly what I was looking for not too long ago (sometimes markdown does not fit all the needs for documentation). How about images? How do you handle images; their layout, scaling etc?

abhinav22 6y ago
Basically you can use CSS to manage their layout - dimensions, positioning, scaling, etc. Should work pretty well If you want floating images (e.g. text on the left, images on the right), it may be a bit more difficult and not perfectly possible. This guide will help: https://www.pagedjs.org/page-floats/ https://www.pagedjs.org/page-floats/ One tricky part is if you want to have text within images and have them the same size as your main text (eg in MS Word where you can have shapes and text boxes). For that, you can probably get close enough with a simple image load, and more precise by using svg graphics, but it may result in a reasonable amount of complexity to make perfect (if at all). For charts, use charts.js in my opinion.

honzajde 6y ago

Saved PDF (in Chrome) does not have a TOC as a side pane in Acrobat Reader. MIssing pretty important feature.

makkesk8 6y ago
The bookmarks feature of pdfs doesn't exist in chrome's pdf engine which means paged.js don't support it either last I checked. We solved this by post processing the pdf generated with paged.js + puppeteer with itextsharp (LGPL) to add the bookmarks. We captured the toc using the paged.js "after" hook and put that into a variable which our backend could then grab from puppeteer.
abhinav22 6y ago
Yes, that would be an advanced feature and I think likely out of the scope for paged.js. That said the table of contents page is hyperlinked - you can jump to sections, and I put a return to table of contents in the footer to aide with navigation. Hopefully that helps?

anonu 6y ago

This is one of the hardest problems we face as a financial research platform. We have a lot of financial data in tables along with line, bar and pie charts. Coming up with something sensible and readable is a bit harder than expected. Ultimately we have a "json to latex" converter we built but it's not great...

smt88 6y ago
We have been using PDF2XL[1] for this for years (used to be called CogniView). It's genuinely unbelievable. If the PDF isn't sufficiently structured, it has OCR that seems to "just work". You can also automate the extraction and integrate it into your pipeline. The UI is pretty old and ugly-looking, but it is one of the few apps I've used in the last 10 years that made me feel genuine delight. 1. https://pdf2xl.com https://pdf2xl.com
burmanm 6y ago
Anything wrong with XSL-FO? I know it's not the hottest thing on earth, but it works. Apache FOP is still developed and it's easy to add it to a pipeline.
- TimTheTinker 6y ago
  It's a lot harder to work with than an HTML template and a CSS file.
abhinav22 6y ago
I work in financial reporting, doing very similar things to what you mentioned here. Mind dropping me an email at Ashok.khanna@hotmail.com and we could discuss further? Would love to chat to others facing similar dilemmas :)
LaundroMat 6y ago
Maybe Vega and its Figures for Papers can help? https://vega.github.io/vega-lite/tutorials/figures.html https://vega.github.io/vega-lite/tutorials/figures.html
TimTheTinker 6y ago

frongpik 6y ago

Add to this a pdf to html converter, with a focus on official forms (e.g. irs tax forms), ability to easily edit fields and add signatures (similar to how the free android adobe app does it), and you can charge money for it.

abhinav22 6y ago
Thanks - indeed there is likely a market for it. One of the issues is that to get a commercial app, you have to solve for most of the edge cases and make sure it has a good enough UI for the non sophisticated. I was thinking about doing it, but it would be a lot of work to do right. By right, I would want it to be the quality of sublime or emacs / vim :) :)
- frongpik 6y ago
  You'd essentially have a pdf editor that can import a pdf, edit it and export the html back to pdf. Working with official forms is one usecase. Another is an iframe that can preview pdfs without resorting to plugins.
  - abhinav22 6y ago
    Indeed - that makes a lot of sense
- frongpik 6y ago
  Actually, there's one more usecase for a html to pdf converter: making a book-style copy of a multipage website. I'm looking right now at a scientific site with content spread over multiple pages and it's tiring to find and click all the links to make sure I don't miss anything.

buovjaga 6y ago

I tried out paged.js recently for a genealogical report exported from Gramps, but I had to use PrinceXML because counter-reset to start at a page does not work: https://gitlab.pagedmedia.org/tools/pagedjs/issues/91 https://gitlab.pagedmedia.org/tools/pagedjs/issues/91 Apart from this feature everything worked fine.

abhinav22 6y ago
Do you have a repo I could play around with? I had the same issue, but for my use case I figured a work around - primarily by using classes. I could spend a few minutes and see if I can get it working for you. But yes, it’s a deficiency in the system currently
- julientaq 6y ago
  I would be happy to see it too. Reset page number using counter is working: https://codepen.io/julientaq/details/MWammZV https://codepen.io/julientaq/details/MWammZV The property needs to be set to the element, and not to the @page. But we may have missed a bug though, so i’ll be happy to check your code.
- buovjaga 6y ago
  Sorry, I forgot to check replies! This is the CSS: #grampstextdoc { counter-reset: page 7; } @page { margin: 2cm 3cm; @bottom-center { content: counter(page); } }

doersino 6y ago

There's also Bindery, a JavaScript library for book creation which also leverages the print-to-PDF feature built into modern browsers: https://evanbrooks.info/bindery/ https://evanbrooks.info/bindery/ On top of that and the in-browser Markdown renderer Markdeep, I've built a tool for typesetting undergraduate theses: https://github.com/doersino/markdeep-thesis/ https://github.com/doersino/markdeep-thesis/ And, coincidentally, just a few days ago I've written a blog post about controlling the settings in Chrome's "Print" dialogue with CSS (other browsers don't support many of the relevant features): https://excessivelyadequate.com/posts/print.html https://excessivelyadequate.com/posts/print.html

austinjp 6y ago
Oh these are great, and I hadn't known of markdeep. Thank you! FWIW, my toolchain is currently markdown files in folders. I pre-pend 000-format numbers to file/dir names so they're assorted by ls or tree. Rendering is a bash script that runs pp first, since files include others using !include(), producing a single .md in /tmp. The mighty pandoc of course, to produce a Word doc, which is then the basis for all further rendering. HTML and plaintext are generated from that with pandoc. I was using pandoc to produce PDFs, but switched to calling libreoffice headless to generate PDF from the Word doc, since this seems to match formatting most closely. Sounds fussy, but it's a few lines of bash, fairly reliable and reasonably rapid. One outstanding issue is tables. The Word doc always requires reformatting tables for column width, flow, etc. I can't seem to get pandoc to carry the styles effectively from a custom reference.docx file. I'm looking at ways to render tables separately, format by hand, then include them into the main doc later.

synergy20 6y ago

PDF is elegant on my eyes. To make it a web surfing experience for me it lacks one thing here, that I need the TOC on the left or right side so I can click and jump to various section quickly.

abhinav22 6y ago
The table of contents is itself hyperlinked. And at the bottom of each page is a link to return to the table of contents. Let me know if that works well?
- synergy20 6y ago
  yes that helps a lot, a toc on the side will be even better but toc hyperlink is good enough for now. Thanks!
  - abhinav22 6y ago
    Thanks!

brightball 6y ago

My question on these is always how it handles multi page documents. Most DOM and CSS approaches to HTML to PDF require it to fully render everything for placement before it can convert. If you have to render something big, like a 300 page member directory for example, the approach will blow up.

idreyn 6y ago
I used paged.js in production and while it's definitely not fast enough to run during an HTTP request, it can render a 300 page document reasonably quickly, definitely within the 120 second TTL of our worker tasks. It can be quite finicky though and sometimes stalls on things like images that are taller than a single page.
- brightball 6y ago
  The RAM upper limit is my bigger concern.
  - julientaq 6y ago
    www.booksprints.net people made 700 pages (which makes a lot of div to handle and process) without too much issues. And you can also check https://villachiragan.saintraymond.toulouse.fr/impression https://villachiragan.saintraymond.toulouse.fr/impression to see HD images. Both went straight to the printshop.

axlee 6y ago

What is your favourite library for printing HTML to PDF?

airstrike 6y ago
https://pandoc.org/ https://pandoc.org/ + something like pdflatex

ChuckMcM 6y ago

This is very nice. I keep wondering when we'll see a resurgence of magazines which use a system like this.

kartoshechka 6y ago

It should be the other way. PDF ought to die and let documents be parsable

runxel 6y ago

For anybody working with pandoc you should try Weasyprint [0]. [0]: https://weasyprint.org/ https://weasyprint.org/

sonthonax 6y ago
Weasyprint is great, but be prepared to start hacking its layout engine for more complex generations. It's nowhere near as mature as PrinceXML.
- runxel 6y ago
  True, it sometimes can get messy to get a decent output. But the dev team behind is currently working on replacing Cairo with a custom Python solution as layouting engine. This will hopefully solve a lot of headaches down the road. Sure, PrinceXML is unmatched. Same goes for the price tag. I know professional CAD software which costs less. Really not doable for smaller offices e.g. Its astonishing that there is no real, great open source alternative for this. Don't get me wrong, Weasyprint is great, but has _a lot_ of dependencies and is a nightmare to install on Windows. Works decent on WSL, tho.
  - adamjhyde 6y ago
    You need to try pagedjs. Which is kinda what this thread is all about.
    - runxel 6y ago
      Maybe I am missing something very obvious, but how do I get a PDF out of it in an automated way? That's what I like about pandoc + weasyprint. I just have a plain ol' markdown document and I receive a nice PDF in an instant. Just like that, super easy.
      - adamjhyde 6y ago
        you can run the command line version. so in your scenario pandoc-> html, pagedjs cli -> PDF

sonthonax 6y ago

By using a W3C standard and devolving the layout engine to the browser, this solves a difficult problem the right way. I would have loved to have something like this for a project years ago.

abhinav22 6y ago
It really does. The team at paged.js are simply amazing and deserve so much credit. It’s such a big deficiency in the modern web, we really need Chrome / Safari / etc to implement the W3C standard or something better

TedDoesntTalk 6y ago

I’ve been looking for a way to convert Wordpress blogs to PDF. There are Wordpress plugins for this but I have not found any that work well. Can this be integrated with Wordpress?

abhinav22 6y ago
Should be able to - somebody with intermediate Wordpress knowledge (unfortunately I don’t know php) should be able to integrate within a day in my opinion, based on my understanding of web development

janandonly 6y ago

I love "printing" webpages to PDF files. I've been doing this for more than 15 years. I delete most of the images first so that I end up with files of 50-500KB. I then store said file in appropriate labeled directories. Now 15 years later I have a private stash of websites and wikipedia articles that I can consult by simply pressing command+spacebar (the files are indexed in MacOS search). To make a PDF file out of a website I currently use Printfriendly.com, but it wasn't always this way. Back in the days I loved to use Arc90's Readability (a firefox extension). I don't know what happend to that extension though, there are plenty of old HN articles about that Wonderfull plug-in though: Post from 2010, probably I started using it right after finding this post... https://news.ycombinator.com/item?id=1153343 https://news.ycombinator.com/item?id=1153343 https://news.ycombinator.com/item?id=3246081 https://news.ycombinator.com/item?id=3246081 https://news.ycombinator.com/item?id=3243097 https://news.ycombinator.com/item?id=3243097 My joy knows no bounds !! I actually ducked for "What happend to arc90.com ?" and found as the 7th item in the list this website: https://ejucovy.github.io/readability/ https://ejucovy.github.io/readability/ It still hosts a working version !!! Okay kids uses these settings and thank me later: * Style: Athelas * size: small * Margin: narrow * Convert hyperlinks to footnotes Whenever a pages is worthy of saving, press the button for Readability and pres ctrl+P and save to PDF... that's it.

VelNZ 6y ago
That's a really interesting workflow, thanks for sharing!

hda111 6y ago

I would prefer if it was a single page like iOS does it when a screenshot of a webpage is made where it offers to export a PDF with everything.

dukeofdoom 6y ago

Adobe makes it harder and harder to use their PDF reader. I live in Canada, and somehow I'm given forms I legally have to use, that I can only print out in adobe reader v10. I need to go through hassle of installing and uninstalling their terrible product couple times a year.

wyck 6y ago

The Achilles heel pf PDF's are they don't have responsive layouts. It's so bad the Adobe team created an AI to resize layouts, yes an AI in the cloud, available only on the Adobe app. How insanely bad is your file format that you need an AI to resize layouts in 2021? If anyone has had to handle layouts programmatically I'd think they would agree that PDF's are the most outdated ass backwards file format in existence.

necovek 6y ago
PDF is an attempt at non-Turing complete, simpler PostScript (PS). It comes from a time of paged media de facto ruling the world. Changing layouts was never the goal, because PDF was the output format. In case of academic research papers typeset with LaTeX, the source file is something you'd likely want to consider the semantic equivalent of HTML. TeX should be able to render the same document with different output constraints ("responsive layout"), but because of the architecture (TeX itself is fully Turing complete), it is pretty slow at re-rendering an entire document. Part of the allure of a static document format like PDF is that you can, in theory, fetch just page 454 of 6000 page document and render that: with HTML, just like with TeX, you'd have to get and render the entire document to be certain that the layout won't change after you've processed the whole file.
- wyck 6y ago
  I'm aware of the history, in the same context of why it not a good idea to use a steam engine in a train anymore
dredmorbius 6y ago
This is a feature. The option to specify the target output size / dimensions at generation time is a reasonable option --- ISO A4 / US Letter, perhaps a target for smaller devices (though a 6"--7"+ tablet should be able to present most reasonably-formatted PDF documents reasonably legibly). For anything smaller, PDF isn't really well-suited, and your better option is to go with a fluid-layout format such as ePub, .mobi, or, yes, HTML. Having largely switched to bookreaders (eInk tablets), in large format with ~300 DPI grayscale screens, I strongly prefer fixed-layout formats such as PDF and DJVU to fluid-layout formats, for the spatial/cognitive reasons many others have mentioned in this thread.

GrumpyNl 6y ago

There should be a button on there that converts the site to a pdf.

dredmorbius 6y ago
Some sites have this, notably Wikipedia and Wikisource, with the option to save as HTML, PDF, and ePub, generally. Occasionally other formats.

asaibx 6y ago

This looks great -- well done! I'd love to be able to use it (the CSS in particular) in a number of different projects where creating such nice readable output is a hassle. However I couldn't find a license mentioned anywhere -- either for the associated repo as a whole [0] or the CSS specifically. Would it be possible to add a license so it's possible to know whether others can use this in other projects without rewriting the CSS from scratch? [0]: https://github.com/ashok-khanna/pdf https://github.com/ashok-khanna/pdf

abhinav22 6y ago
Thanks :) It’s all free, I will figure out how to add the license tomorrow as I don’t know what’s the right one - basically don’t want people to have any issues with GPL so if I understand then MIT is the right one? Also paged.js is the property of their team, together with the script of toc.js whilst MathJax is the property of their team too. Have to figure out how to word it. But if anyone is reading in the meantime, it is open source, no need to attribute anything back to me for my parts. If you are using the text of the guide, you could mention my name, but don’t sweat it either - it wasn’t particularly involved in terms of writing (the hard part was choosing which parts to write about so it’s not too complex but also not too barebone).
- adamjhyde 6y ago
  Hi, Adam here from Pagedjs. Pagedjs is MIT. Mathjax is Apache 2.0 and isn't part of our work :) Wonderful as it is...we can't claim credit for it! (We Love MathJax - https://github.com/MathJax/MathJax https://github.com/MathJax/MathJax)
  - abhinav22 6y ago
    Thanks Adam! I know I come across as one of the biggest fans of paged.js, but it’s such an inspirational project! The idea to polyfill the required functionality for CSS Print Rules is pure genius, as somebody who looked at all the alternatives. It’s a great example of thinking outside the box. Thanks again!!
6y ago

TimTheTinker 6y ago

If you'd like to typeset HTML/CSS documents (with optional PDF-specific CSS blocks to handle page layout, numbering, header/footer, etc.), then I'd highly recommend Prince: https://www.princexml.com/ https://www.princexml.com/ It's a typesetting-specific layout engine that supports HTML, CSS, JS, and even styled XML if that's your thing. It independently developed support for all the latest standards... it's not free but it's very good. The inventor of CSS, Håkon Wium Lie, is one of the product's developers. I used it on an app a while back to add a PDF export feature to a web app... couldn't speak more highly of Prince.

kumarvvr 6y ago
Wow, this is incredibly expensive. I don't mean to say it is not worth it. I have a problem at work that requires highly dynamic content to be generated and output to pdf files. Right now, I am using excel template documents. I would love to use open technologies to do the same. Not able to find anything so far that is as flexible and user friendly. The closest alternative is to use OpenOffice Calc documents.
- abhinav22 6y ago
  Try the HTML / CSS / Paged.js workflow with headless chrome - I think it works really well (and open source / free with the exception of Chrome, where you are a bit at the mercy of Google, but they are unlikely to make any breaking changes in my opinion)
- earthboundkid 6y ago
  Prince is so good. I wrote everything I did in grad school with Prince. It’s expensive because it’s aimed at audiences that can afford to pay for good typography.
  - benrbray 6y ago
    Uh, I don't know many grad students willing to blow US$495 on software like this when they can just use a combination of Overleaf / Jupyter / RMarkdown.

edwr 6y ago

I'm very confused with the PDF appreciation comments. I have to read lots of PDF textbooks and reference documents for school and the experience is grating, especially trying to navigate a document with upwards of 1000 pages on the Chrome PDF reader or Adobe Acrobat on a laptop. Trying to manipulate a tiny scrollbar with a laptop touchpad is very frustrating and using gesture scrolling is tedious for a large document when you have to flip around to various pages. Perhaps I've been doing something wrong, any thoughts?

rzwitserloot 6y ago
Feels very much like a channeling of Churchill's 'Democracy is the worst form of government' ditty, except as applied to HTML and PDF. PDF is horrible. But it's not 'as horrible' as HTML (with the rather loomingly large caveat that this is has very little to do with the formats and everything to do with what your average HTML dev ends up making, and only applies to the job of reading significant chunks of in-depth materials). As a format, yes, what the fuck is everybody talking about? PDF is a disaster and should be killed off, HTML is great.
kumarvvr 6y ago
PDFs look and are made to feel like actual books. I see that as the primary reason for people being comfortable with PDFs. Even if their readers are buggy. Consider the alternatives. HTML, too much re-rendering and re-formatting. Word - Oh No. Not in a million lives. Have you seen the atrocity that is the "reading mode" in Word? Epub / Mobi / Etc - I have never come across good readers. For what its worth, PDFs are great for reading on larger screens like iPads. I read them on my mobile too, but that's not good for long reads.
dredmorbius 6y ago
Get a dedicated ebook reader if you can. The price is pretty reasonable up to about 7-8", and not too high to 10". I splurged for 13" as I read a lot and often low-quality scans of small, three-column print. The pixel density of an ebook reader (200-300 DPI) is far higher than even Retina displays. Monocrome/greyscale gives higher resolution as well (the three-elements-per-pel aspect of colour displays means you're always left with about 30% the effective resolution, though subpixel aliasing helps a lot). Portrait will display a single page well (laptop displays suck for reading text), and for larger devices or larger-print materials, you can often manage a two-page-up display.

deedubaya 6y ago

I built, use, and maintain https://github.com/danielwestendorf/breezy-pdf-lite https://github.com/danielwestendorf/breezy-pdf-lite which uses Chrome to convert html to PDF’s as a web service. Maybe someone here will find it useful!

zakki 6y ago

Looks perfect when I saved it to PDF using File->Print menu on Safari. But it is exported to single long PDF page when doing it from File->Export as PDF.

MilStdJunkie 6y ago

Asciidoctor has a web PDF tool that just went alpha a little bit ago, uses the same stack as the OP's thingie. https://github.com/Mogztter/asciidoctor-web-pdf https://github.com/Mogztter/asciidoctor-web-pdf The content handoff goes like this: Asciidoc (using defined roles) generates HTML5 (Paged<dot>js polyfills page areas / pagination stuff), CSS styles stuff, and Puppeteer runs a headless Chromium for the pdf render. It's straight from CSS GCPM W3C spec, a flavor of CSS Paged Media, drafts that have been percolating since frickin' 2006 but have never seen browser implementation. The beauty of this is that you use the same CSS for web and PDF deliverables. Actually, the even better beauty is that you are using two dirt-common technology stacks - CSS and Javascript - instead of XSL or Prawn or some ancient bespoke layout language. With Asciidoctor, for complex print requirements you're going to be forced to either 1) DocBook-XSL via fopub or 2) DocBook-LaTeX via dblatex. The native Prawn-based PDF tool isn't capable of a whole lot of customization without extensions. So web-pdf is a real shot in the arm for those of us that aren't real keen on going back into XSL-FO.

adamjhyde 6y ago
also using pagedjs :) awesome!
- MilStdJunkie 6y ago
  Yeah, in the Python world there's WeasyPrint for PDF out in the wild as well. It's quite slick, but it's a harder sell because of Python, which corporate types seem to think is bad hacker central. https://github.com/Kozea/WeasyPrint https://github.com/Kozea/WeasyPrint
gorgoiler 6y ago
Amazing news, thank you for sharing. Prawn’s pure ruby implementation of image layout makes it too slow for the graphics heavy technical manuals I write (though I haven’t used asciidoctor-pdf in 12 months.) I ended up drafting documents with 10dpi images just to get it to render quickly enough for layout but even then, adding images turned a 100ms render into a 6000ms render. Hopefully this problem goes away with a fast web based stack. I’ve never had much luck with break-after/before:avoid for <h2>. I hope their css or paged.js works for avoiding this common fault.

aforwardslash 6y ago

Shameless plug - https://github.com/zipreport https://github.com/zipreport OSS Python library to generate PDF reports from HTML, using pagedjs. Uses Jinja templates, supports runtime-generated images, client-side JS, and reports are bundled as a single file.

abhinav22 6y ago
Anything with paged.js makes me an auto fan :) This could be very interesting for those with Python workflows, thanks for sharing

totorovirus 6y ago

Is there any HTML from PDF available?

reubens 6y ago

I love this. Typo FWIW on page 8: "You want to select the print background option and delect the print headers & footers option."

abhinav22 6y ago
Thanks! :) Will fix it after work.

gulzhana_sweet 6y ago

thank you for bringing value to the world and supporting free things! i think without pdfs in new era of lockdowns we cant proceed anymore online activities where pdf now is new passport - pass by ticket to anything! just have to keep my eye on phone battery

Abhinav2000 6y ago
Your welcome

papa_bear 6y ago

Can anyone speak to how this compares with something like wkhtmltopdf? That's what I've been using, and this is my first time hearing about PrinceXML too. I generate some HTML for the user, they can edit it with a rich text editor like TinyMCE, and then we export to PDF on the server side. Wkhtmltopdf is pretty barebones on the style/feature side though, so this looks worth investigating.

abhinav22 6y ago
From my limited experience with wkhtmltopdf, a solution based on paged.js should work better But maybe that’s because I didn’t fully learn wkhtmltopdf PrinceXML is very good but is a paid solution. I found paged.js, at least for my purposes, on par with PrinceXML
- papa_bear 6y ago
  Interesting, thanks for the input!

pseingatl 6y ago

I don't understand why so many people think "pdf" automatically means "A4" or "letter size" document. PDF's are size agnostic. Storage is cheap and so is processing power. A phone-sized pdf will be 20 mb instead of 1 mb, but so what? It's a small price to pay for quality typesetting. Similarly, pdf's can be sized for the now typical 16:9 laptop screen.

ospider 6y ago
Because 99 percent* of PDF is A4 sized. * From my observation and guess.

busymom0 6y ago

I was looking for something similar recently and I ended up using jsPDF for my ResumeToPDF site and it worked pretty well. Only thing I sort of had pain with was that I had to include SVG icons in-line in the html/javascript and had to convert them to base64 to be included in the PDF. And same thing for the custom fonts - I had to include base64 of the font TTFs to be embedded in the PDF: https://resumetopdf.com https://resumetopdf.com https://github.com/MrRio/jsPDF https://github.com/MrRio/jsPDF

jtbayly 6y ago
Can you point me to something that explains how to do what you did (embedding the base64 of the font TTF)? I'm wondering how I can make a PDF of a webpage use the same font I used on the webpage. Edit: Never mind. I found the instructions on one of your links: https://github.com/MrRio/jsPDF#use-of-unicode-characters--utf-8 https://github.com/MrRio/jsPDF#use-of-unicode-characters--ut...
- busymom0 6y ago
  In case you are still stuck, here's what I do. If you have questions about this, email me using the "Send Feedback" from my site. I serve the base64 of each weight and style (normal, normal italic, bold, bold italic) inside a JSON. Here's one example of the JSON I serve for the Open Sans family: https://resumetopdf.com/fonts/OpenSans.json https://resumetopdf.com/fonts/OpenSans.json And here's me embedding it and making it available to jsPDF. NOTE the font.replaceAll to remove white spaces from the font name when embedding. jsPDF has this bug (or maybe expected behavior where it can't handle white spaces in the font name): var fontBase64 = {} const doc = new jspdf.jsPDF({ orientation: 'p', unit: 'mm', format: currentresume.size, putOnlyUsedFonts: true, }) const fontsToEmbed = [currentresume.headingfont, currentresume.bodyfont]; for (font of fontsToEmbed) { const fontName = font.replaceAll(' ', '') if (!doesExist(fontBase64[fontName])) { let response = await fetch(`https://resumetopdf.com/fonts/${fontName}.json`) let data = await response.json() fontBase64[fontName] = data } Object.keys(fontBase64[fontName]).forEach(style => { doc.addFileToVFS(`${fontName}-${style}.ttf`, fontBase64[fontName][style]) doc.addFont(`${fontName}-${style}.ttf`, fontName, style) }) } Once added to jsPDF, later on you can set the font and style, weight etc: doc.setFontSize(originalFontSizeInPt) doc.setFont(fontFamily, fontStyle) Also the JSON with base64 of font families is served over CloudFlare with an infinite cache - this prevents any costs on my end and also speeds up the user experience when they return to the page.

austinjp 6y ago

Similar to some others here, I have folders full of PDFs. I recently discovered Recoll, which is great for searching them. Fuzzy search of contents as well as filenames. https://www.lesbonscomptes.com/recoll/ https://www.lesbonscomptes.com/recoll/ As well as this, I have a script which find all .pdf files without a corresponding .txt file, then generates one with pdftotext. Really handy, I can then easily grep -ril or ag -til for contents. One gotcha: the text files have line breaks, meaning matches don't always work.

majkinetor 6y ago
There is also dnGrep for Windows which does much more: https://dngrep.github.io/ https://dngrep.github.io/

jl6 6y ago

PDFs are great and I now publish my website exclusively in PDF/A, not HTML. I have many reasons, but top of the list is that PDFs put the user in control, whereas HTML is now firmly the agent of the publisher.

edeion 6y ago
What do you mean publish your website in PDF/A? Is your frontpage a PDF document linking other PDFs? Ha! Just checked you account and indeed that's what you do... I'm not sure I like to acknowledge the sense of failed HTML but your pages look good and there's no javascript nonsense in the background.
mro_name 6y ago
lol, but not my humour.

mro_name 6y ago

for simple things, like e.g. a resume with only a few pages you don't need any tool at all. Just write html + a bit of css (no 3rd-party complexity!) and print it (to pdf). Done (assuming you won't apply as a print designer)

thatguyagain 6y ago

It's absolutely fascinating how much attention "x to PDF" or "PDF to x" draws still. I use and struggle with this on a daily basis, been trying to build my solutions but never really got there. It's still an issue people are willing to pay to solve in the best way possible for their use case.

Abhinav2000 6y ago
There's definitely a market for it!

jhiggins777 6y ago

Another great option is https://www.pdfmonkey.io https://www.pdfmonkey.io. They're also wired up in zapier.

sharikous 6y ago

fds

sharikous 6y ago

For me, the best way to read something is a media that is limited in the x direction but has no page limits and can go down as needed. Like most of the websites. Foldable sections, hyperlinks and floating TOCs, are a bonus too. This is ideal for reading from a tablet or from a desktop and is somewhat printable too, Unfortunately most tools for producing PDFs from HTMLs assume you want to divide them into pages, and there is no easily produceable "reading format" as widely adopted as PDF. Those page cuts are so annoying when you read from digital media.

littlehodlboy 6y ago

Is it possible to add functionality to make the page up/down buttons scroll a full page?

Abhinav2000 6y ago
Might be difficult but will have a look