3

Question

When I convert HTML content to PDF using

  1. "Print Pages to PDF" plugin for firefox (scrollable area content are preserved however cannot see them)
  2. CutePDF Writer Missing content (No Formating,But Readable)
  3. Save as HTML -> Open with Microsoft Word 2010 -> PDF (Formatting get destroyed)

Is there any way I can ensure that the content inside the scrollable areas are correctly visible ?


Example Scenario :

A Stack-overflow question screenshot

A stackoverflow question

As you can see there are some code hidden by the scroll view.

After conversion that non visible part is missing in the PDF

After conversion

2 Answers 2

1

Root cause

The root cause of the problem, in this specific case, is a deficient stylesheet for stackoverflow.com.

If you examine the CSS for another site, such as codereview.stackexchange.com, you'll see

@media print {
    …

    pre {
        max-height: none;
        display: block;
        width: 600px;
        height: auto;
        overflow-x: auto;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap !important;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        clear: both
    }

    …
}

The crucial property is white-space: pre-wrap.

Workarounds

You can use a number of Firefox plugins, such as Firebug, Web Developer, or Stylish, to temporarily tweak the style rules before printing. Such changes would not persist after the page unloads.

Alternatively, you can override the CSS semi-permanently, with no add-ons, by editing userContent.css. Specifically, the narrowest customization that would solve this layout problem is:

@-moz-document domain(stackoverflow.com) {
    @media print {
        pre {
            white-space: pre-wrap;
        }
    }
}

After applying userContent.css

Successful output

Hidden code is preserved.

1
4

Solution 1 : Output PDF (Readable,Styles are not preserved)

Use Readability plugin Or Website

Readability is a free reading platform that aims to deliver a great reading experience wherever you are, and to provide a system to connect readers to the writers they enjoy.

With Print Edit plugin

Print Edit allows editing of the web page content while in Print Preview mode. Editing the web page prior to printing can compact the layout and remove unwanted content such as adverts, sidebars and blank pages.

In Print Edit mode, any of the displayed content elements can be formatted, hidden or deleted, prior to printing in Print Preview mode. It is possible to switch repeatedly between Print Edit mode and Print Preview mode.

Steps:

  1. Add Article To Readability
    Add Article To Readability
  2. Change How It looks until satisfied
    How It looks
  3. Click Print Edit
    Print Edit
  4. Delete Stuff
    enter image description here
  5. Press Preview
  6. Press Page Setup and make changes
  7. Press Make PDF then Save PDF
  8. Rename the file to include PDF extension

Solution 2 : Output MAFF (Everything is preserved,Different file format)

Use MAFF (Mozilla Archive Format)

This extension enhances the way web pages are saved on your computer.

It provides the following advantages over the built-in save system:

  • A complete page can be saved as a single file (web archive)
  • You can name files using the title of the page (title save)
  • The saved pages are faithful to the original (exact save)

You can view and save MHT (MHTML) files, with excellent compatibility with Internet Explorer; but more importantly, you can use the MAFF file format, with the following advantages:

  • Save disk space, since MAFF files are compressed
  • Include video and audio embedded in the pages
  • Be universal, since MAFF is based on ZIP and compatible with Linux and other platforms
  • Use an open format, with no risk of vendor lock-in

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .