Making an okay-looking printable version of an article is relatively easy. But printing anything more advanced is not easy to get both right and browser-compatible.
What I wanted to do: Take our onscreen table-layouted webpage (a plan/calendar-ish thing, generated by our webapp) that looks great on both desktop and mobile, and print it to a paper and still look much the same, but handle pagination, unknown amount of text, and user-selected font and size. On all browsers.
What our dev-team ended up doing after a lot of headscratching and cursing: A webservice that takes our webpage and opens it in a chrome headless browser, and returns a carefully styled and rendered pdf based on a few preset layout- and font-options.
Viewing PDFs in browsers are not fun either..
Some browser-embedded pdf viewers shows print and save buttons. Others dont. Or only do if you hover the cursor at the correct position or click inside the document.
There is no way to get javascript to reliable call "print" on a embedded or iframed PDF document. So we just added a download button instead.
Putting clickable links inside PDFs will open the webpage inside the pdf-frame. You can put javascript inside the PDF to make it open the link in the system-default browser window, but not all PDF viewers supports this. I kinda understand why links arent really well-supported in pdfs. It is supposed to be a printable product after all. Just annoys me that if there is a link, and a user clicks it while inside a embed or iframe, there is sometimes no way to go back to the pdf.
Justin helps dev and product teams navigate the waters of mobile app development and is an expert at integrating them into larger technical, customer, and business ecosystems.
Wow, yeah. Glad to hear how much thought you put into it.
way easier to just design and code a mobile app and tell the customers to use that
I can see this being a good argument for installing an app for anything more complex. "Need this offline or on the go? Don't print, or save as PDF, just install our app."
I now also understand better why apps and extensions exist to turn websites into more readable layouts. I found myself opening up dev tools to manually delete nodes and resize containers to print better at times.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Making an okay-looking printable version of an article is relatively easy. But printing anything more advanced is not easy to get both right and browser-compatible.
What I wanted to do: Take our onscreen table-layouted webpage (a plan/calendar-ish thing, generated by our webapp) that looks great on both desktop and mobile, and print it to a paper and still look much the same, but handle pagination, unknown amount of text, and user-selected font and size. On all browsers.
What our dev-team ended up doing after a lot of headscratching and cursing: A webservice that takes our webpage and opens it in a chrome headless browser, and returns a carefully styled and rendered pdf based on a few preset layout- and font-options.
Viewing PDFs in browsers are not fun either..
(I'm hoping we can use a js-based PDF viewer next time we remake this.)
But its way easier to just design and code a mobile app and tell the customers to use that. 😆
Wow, yeah. Glad to hear how much thought you put into it.
I can see this being a good argument for installing an app for anything more complex. "Need this offline or on the go? Don't print, or save as PDF, just install our app."
I now also understand better why apps and extensions exist to turn websites into more readable layouts. I found myself opening up dev tools to manually delete nodes and resize containers to print better at times.