Creating downloadable PDFs using the .print window
By Nan Copeland • Jul 15, 2017
Recently, we added a tool to our site for our Ad Operations team that allows them to print styled articles for clients. This saves both the Ad Operations (Ad Ops) and Design teams time and also streamlines the process so there are fewer errors and back and forth between teams.
When our clients run sponsored articles on our site, we send them a PDF after the campaign finishes. Previously, designers had to copy and paste the article content from the site into InDesign and style it. While this allowed for lots of customization, the process was tedious and pretty boring for a designer to complete. As the demand for these PDFs increased, designers as well as the Ad Ops team became frustrated. What could we do to fix this?
After looking at the problem, I decided to create a tool that would…
- be easy for any member of Ad Ops to use
- require little work from the design team (unless bugs arise)
- be customizable with simple CSS, as needed
Building the Tool
I decided to build this feature using the browser print window. Instead of sending the page to an actual printer, the user could “Save as a PDF.”
All I needed was a custom print stylesheet to apply to this specific article type.
Because this is an internal feature, I wrote the code so that a class is conditionally added to articles when they are sponsored and the user is logged into CMS. This ensures our readers don’t experience negative load times on the page.
All styling was wrapped in the following class inside a print media query.
In terms of styling, writing SCSS for a print stylesheet is a bit different from the web. First, I knew I wanted a full-width image, so I zeroed out all the padding on the wrappers.
Then, I set widths on the wrappers around the content so they were centered in a block on the page. This makes the PDF cleaner and easier to read. I used inches because I knew the PDF might actually be printed by the end user.
The last thing to note about styling for PDFs is page breaks. Read more about them here, because they’re a bit tricky. I wanted to make sure that the page broke when the copy started. I also wanted to avoid one line of copy from a paragraph being on a page by itself. I had to play around with this but found a way to address both problems.
How does it work?
To make this user friendly, when the user is logged into the CMS, they see the “Download Story PDF.”
If you click on the button, the browser’s print window pops up. Inside here, the user must make sure they change the printer to “Save as PDF” (as specified above) and uncheck “Headers and footers” and “Background graphics.”
If the person downloading wants to customize the look of the PDF, I created a document in our internal Confluence space that details how to do this. It includes how to change the color of links, how to change the size of the headings and how to change the width of logos all to make sure the PDF is optimized for the client. All code is manually added through the CMS.
The Confluence document includes code snippets the user can copy and paste so it is easy to change the design. After adding some custom CSS, the PDF has the potential to look pretty good! While InDesign allows for more customization, this tool saves multiple teams time and produces a nice looking product for clients to use.
UPDATE: We recently rolled this tool out to all stories (not just sponsored) so any company member has the ability to print any article in this format. This is still used mainly for sending content to clients.