Saving .PDF files from webpages sometimes does not work?

[stanw]

I save lots of webpages as .PDF files so I can read them offline, and recently, I've noticed that with some sites it no longer seems to work in Safari, Chrome, or Firefox. After saving a page as a .PDF I get a .PDF with 2 blank pages. I also tried using free apps on my iPad to save a page as a .PDF with the same result. I'm not sure if there is some new code on the sites that prevent the pages from being saved as .PDF? If so, is this being done deliberately because they do not want people saving their pages or is it just code that inadvertently is interfering with being able to do so?

Does anyone have any suggestions for other ways of doing this?

Thanks.

 

[Dal123]

I haven't come across this yet; thank god!

Sounds like a code protecting the website I would guess. Were you able to do it from this website as I just did it from the forum.

 

[stanw]

Some of the sites that I usually open tons of tabs from Feedly and no longer work for me:

http://gizmodo.com
http://gawker.com
http://lifehacker.com
http://www.theverge.com
http://www.wired.com

Mac rumors seems to work still for me

 

[Dal123]

This is what lifehacker looks like when I do it (attached).

If that's what you're getting too - that'll be the way the website is coded. They'll have certain 'classes' and 'id's' to each element using css (cascading style sheets) on the page which will not print.

So if you get the same result as me relax your head, if not then yes Sir, something is likely wrong.
Your browser could be interpreting it differently also; I'm using Firefox 37.0.2.

 

[stanw]

It just does not seem to work for me, as an example, I tried to make a .PDF from this page:

http://vitals.lifehacker.com/whats-the-best-way-to-wash-my-produce-before-i-eat-it-1698311216


and I only get a .PDF with 2 blank pages. I'm guessing that it is just some code in some of the pages that prevents me from doing this, while others, like the one you made do not have the code...

 

[0d085d]

Both Wired and The Verge seem to work fine for me. Can you find a specific page that doesn't work?

However,

Kinja is a blogging platform used by Gizmodo, Gawker and Lifehacker.

On line 19056 of the Kinja stylesheet (in the print media section), there's:

    .top-nav, .sidebar, .header-action-wrapper, .meta-tools, .post-bottom,
    .reply-filters-tabbed, .reply .reply-tools>a, .footer-kinja, .reply-views,
    .js_readmore, .js_toggle-pending, .medium-headline, .small-headline,
    .referenced-wide.referenced-fullwidth .readmore-referenced, .flex-video,
    .reply-footer-bar, .annotation-footnote-wrapper, .ad-top-banner,
    .global-nav__left, .global-nav__right, .inner-wrap {
        display: none
    }

This is hiding the .inner-wrap div, which has the main content in it.

This doesn't look intentional, as print is otherwise well coded for. I'd guess it's a bug in Kinja.

Workaround?

When you want to print, insert the following into your Safari address bar and hit enter:

javascript:var b=document.getElementsByClassName("inner-wrap");for(var i=0;i<b.length;i++){b[i].style.display="inherit";}

This sets the visibility of the inner-wrap element. You should then be able to print normally.

In Chrome, press cmd+opt+j and paste the same code into the console.

 

[stanw]

Thanks for the replies.

Below are some recent links that I am unable to save as .pdf from Safari, Chrome or Firefox.

When I paste the code you suggested into Safari, I receive the following message: Safari doesn't allow JavaScript from the Smart Search Field. To allow this, choose "Allow JavaScript from the Smart Search Field" from the Developers menu.

I'm not sure where the Developer's menu is? I have Enable JavaScript under Security in preferences.

When I try what you suggested in Chrome, I get a 2 blank pages again. I start by pasting the code into the console, than I go to the url. Am I doing this wrong?


http://gear.kinja.com/buying-guide-gear-for-better-tea-1699732401/+ShaneRoberts

http://hackerspace.lifehacker.com/t...ors-youll-ever-need-1698175967/+whitsongordon

http://gizmodo.com/7-endangered-examples-of-the-most-hated-architectural-s-1636643535

http://lifehacker.com/top-10-lazy-yet-smart-ways-to-spring-clean-your-home-1698662777

http://lifehacker.com/should-i-refinance-my-mortgage-1698445728

http://io9.com/lets-break-down-the-secrets-and-spectacle-of-the-new-st-1698268479

http://gizmodo.com/dysons-new-filtered-hand-vac-is-designed-to-suck-your-m-1698271059

http://vitals.lifehacker.com/whats-the-best-way-to-wash-my-produce-before-i-eat-it-1698311216

http://lifehacker.com/isabel-diagnoses-your-health-symptoms-based-on-tools-u-1699213754

http://gizmodo.com/the-people-who-make-your-videos-go-viral-1698878064

 

[0d085d]

Oops, sorry. In Safari you need to go into Preferences -> Advanced and tick the "Show Develop menu in menu bar" box at the bottom. The option to run Javascript from the address bar is at the bottom of the Develop menu then.

Yes, in both browsers you need to load the page THEN run the code.

All of the pages that you've linked to should be fixed by this.

 

[stanw]

Thanks so much for your help!

Are there any downsides to keeping these options turned on all the time? Does it become a security issue in any way?

 

[0d085d]

Are there any downsides to keeping these options turned on all the time? Does it become a security issue in any way?

There's no problem at all with having the Develop menu in the menu bar. Allowing Javascript in the address bar is in theory a vulnerability, but I've never heard of it in practice.