Como converter HTML em PDF preservando a visibilidade do conteúdo dentro de áreas roláveis

Question

Pergunta

Quando eu converto o conteúdo HTML em PDF usando

1. " Imprimir páginas em PDF " plugin para o firefox (o conteúdo da área de rolagem é preservado, mas não pode ser visto)
2. CutePDF Writer Conteúdo ausente (sem formatação, mas legível)
3. Salvar como HTML - > Abra com o Microsoft Word 2010 - > PDF (a formatação é destruída)

Existe alguma maneira de garantir que o conteúdo dentro das áreas roláveis esteja visível corretamente?

 

Exemplo de cenário:

Uma pergunta sobre estouro de pilha screenshot

Comovocêpodever,háalgunscódigosocultosnaexibiçãoderolagem.

Apósaconversão,essapartenãovisívelestáfaltandonoPDF

    

Answer 1

Causa raiz

A causa raiz do problema, neste caso específico, é uma folha de estilo deficiente para stackoverflow.com .

Se você examinar o CSS de outro site , como codereview.stackexchange.com , você ' vai ver

@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
    }

    …
}

A propriedade crucial é white-space: pre-wrap .

Soluções alternativas

Você pode usar vários plug-ins do Firefox, como o Firebug , Desenvolvedor da Web ou Stylish , para ajustar temporariamente as regras de estilo antes de imprimir. Tais alterações não persistirão depois que a página for descarregada.

Como alternativa, você pode substituir o CSS de forma semi-permanente, sem complementos, por edição userContent.css . Especificamente, a personalização mais restrita que resolveria esse problema de layout é:

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

Depois de aplicar userContent.css

O código oculto é preservado.

    

Answer 2

Solução 1: PDF de saída (legível, os estilos não são preservados)

Use o plug-in de legibilidade ou o site

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.

Com o plug-in de edição de impressão

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.

Etapas:

1. Adicionar artigo à legibilidade
   
2. Alteraraaparênciaatéquefiquesatisfeito
3. Clique em Imprimir edição
   
4. Excluircoisas
   
5. Prima Pré-visualizar
   
6. Prima Configuração da página e efetue alterações
   
7. Prima Criar PDF e depois Guardar PDF
   
8. Renomeie o arquivo para incluir a extensão PDF

Solução 2: Saída do MAFF (Tudo está preservado, Formato de arquivo diferente)

Use MAFF (Formato de Arquivo Mozilla)

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