Estou tentando salvar uma página do Reddit para visualização OFFLINE como um único arquivo HTML, EXATAMENTE como é exibido no navegador e depois de já ter expandido manualmente alguns tópicos de comentários. Este problema é um subconjunto da questão geral de como salvar todo o DOM da web em seu estado atual, preservando os efeitos e o layout CSS. Por exemplo, aqui estão uma infinidade de postagens na plataforma Stack Exchange que fazem esta pergunta geral:
- Como posso despejar todo o Web DOM em seu estado atual no Chrome?
- É possível despejar o DOM com JavaScript e preservar os efeitos e o layout CSS?
- Como salvar uma página da web em seu estado atual com imagens no Chrome?
- Salve a página da web atual em um único formato de arquivo HTML
- Posso capturar e salvar o estado atual de uma página da web usando javascript?
- Como mostrar/salvar o HTML incluindo imagens conforme mostrado atualmente pelo navegador da web?
- Como obter uma cópia local perfeita de uma página da web?
- Como salvar um aplicativo da web em HTML estático?
- Salvar site contendo javascript depois de interpretado
- Como faço para salvar uma página da Web sem recarregar ou executar novamente o JS?
- Como faço o download completo de uma página da web, preservando sua funcionalidade? [duplicado]
Quase todas as respostas são de uma das seguintes formas:
Clique com o botão direito e selecione
Save as...
e salve comoWeb Page, Complete (*.htm;*.html)
ouWeb page, Single File (*.mhtml)
.Abra o Chrome DevTools e copie todo o HTML (
Copy outerHTML
) daElements
guia.Você nunca será capaz de salvar um arquivo que se pareça exatamente com a versão ativa do site porque muitos links são links "relativos" e muitos links para scripts externos podem estar contidos em arquivos CSS e JS.
Use uma ferramenta como HTTrack. (Até onde eu sei, no entanto, o HTTrack não suporta salvar tudo em um único arquivo HTML.)
Salvar uma página da web como um único arquivo HTML exatamente como aparece para o usuário durante uma renderização ao vivo é simplesmente impossível para muitos sites.
Use uma extensão de navegador, como “ Single File ” (a página GitHub do desenvolvedor está aqui ), “ Save Page WE ” ou “ WebScrapBook ”.
Experimente a extensão “ WebRecorder ” do Chrome .
Várias dessas respostas realmente alcançam algum nível de salvamento do layout da página da Web como um único arquivo HTML, exatamente como aparece quando renderizado ao vivo, mas há uma ENORME desvantagem: elas não salvam o arquivo HTML de uma maneira que possibilite o usuário visualizar a página OFFLINE . A parte de visualização offline é essencialmente o que procuro e é o cerne do meu problema.
Por exemplo, abrir o Chrome DevTools e salvar tudo outerHTML
na Elements
guia realmente permite que o usuário salve a página exatamente como ela aparece quando renderizada ao vivo, mas assim que o usuário tenta abrir o arquivo HTML no modo offline, nenhum dos recursos externos os scripts são capazes de carregar e, portanto, toda a seção de comentários da página do Reddit literalmente nem é exibida. Fiz uma inspeção manual no próprio arquivo HTML e descobri que os próprios comentários estão realmente presentes no arquivo HTML, mas simplesmente não são renderizados quando o usuário carrega o arquivo, pois dependem de scripts externos para ditar como para exibir ao usuário.
Uma solução (quase...)
Na minha experiência, descobri que usar a extensão do Chrome SingleFile realiza exatamente a tarefa que procuro (quase), e é melhor. Ele é capaz de salvar a página exatamente como parece ao usuário durante uma renderização ao vivo (mesmo quando visualizada offline), e descobri que é melhor do que as extensões "Salvar página WE" e "WebScrapBook". SingleFile lida perfeitamente com muitos sites, mas falha miseravelmente ao tentar salvar uma página do Reddit que possui um enorme tópico de comentários . Nesses casos, a extensão consome muita memória e simplesmente trava a guia ( Out of Memory
ocorre um erro). A parte triste é que a extensão funciona bem em postagens do Reddit que têm uma seção de comentários muito pequena, mas de forma um tanto zombeteira, na maioria das vezes quando eu quero salvar uma postagem do Reddit, a postagem do Reddit tem uma seção de comentários muito grande e, portanto, o A extensão SingleFile não consegue lidar com isso.
O desenvolvedor do SingleFile tem uma variante de linha de comando da ferramenta em sua página do GitHub , mas isso simplesmente inicia um navegador sem cabeça e baixa o URL solicitado. Essa abordagem é inútil no meu caso, pois quero salvar a página do Reddit com as modificações que fiz pessoalmente e manualmente (ou seja, com os tópicos de comentários desejados expandidos manualmente). Além disso, tive o mesmo problema de falta de memória com essa abordagem.
Solução alternativa suja
Descobri que uma solução super suja para o meu problema é simplesmente salvar a página no formato PDF, mas não quero um formato PDF. Eu quero um formato HTML.
Alguma ideia sobre como salvar uma página do Reddit para visualização offline, mesmo em casos em que a seção de comentários é bastante grande?
DR Use WebScrapBook ≥ 2.12.0 com opções: NOT
Style images: Save used
, NOTFonts: Save used
, NOTScripts: Save/Link
. (Isenção de responsabilidade: sou o desenvolvedor do WebScrapBook)A causa raiz do consumo excessivo de memória/volume durante uma captura de SingleFile ou muitas outras ferramentas semelhantes é que as páginas do Reddit usam amplamente shadow DOMs com folhas de estilo construídas compartilhadas, que são técnicas modernas baseadas em script, e o conteúdo relacionado não pode ser expresso diretamente por HTML.
Veja o exemplo recente que fiz com WebScrapBook 2.12.0 no Chrome 126/Firefox 129 para a página fornecida por OP , que foi rolada para baixo e teve "Ver mais comentários" clicado 20 vezes antes de invocar a captura:
A página salva tem 79,1 MB e contém 1.987 comentários, cada um com cerca de 29 shadow DOMs, cada um dos quais faz referência a várias folhas de estilo construídas compartilhadas. Em particular, cerca de 6 dos shadow DOMs fazem referência a grandes folhas de estilo construídas compartilhadas que têm cerca de 200 KB.
A maneira como SingleFiles armazena uma folha de estilo construída é gerando um elemento STYLE correspondente no documento vinculado ou na raiz sombra. Como resultado, uma folha de estilo construída referenciada por vários shadow DOMs é duplicada continuamente.
Nesse caso, o volume estimado da grande folha de estilo construída duplicada nesta página é 1987 * 6 * 200 ≈ 2,3 GB! Isso ainda não inclui o conteúdo HTML e outras folhas de estilo menores! É por isso que um problema de “falta de memória” pode ser facilmente desencadeado.
O WebScrapBook 2.12.0 reformulou a estratégia de lidar com folhas de estilo construídas para que elas não se dupliquem mais entre cada shadow DOMs referenciado.
No entanto, certos cálculos durante a captura podem ser complicados. Para WebScrapBook é
Style images: Save used
eFonts: Save used
(pode haver recursos/opções semelhantes para SingleFile), que precisam verificar muitas regras CSS em cada shadow DOM de referência para ter certeza se uma imagem/fonte é realmente usada ou não. Até que seja finalmente integrado ao arquivo de página final, mapeamentos relacionais intermediários são gerados durante cada execução e consomem cada vez mais memória. Isso também pode esgotar a CPU/memória durante uma captura e, portanto, tais opções devem ser evitadas.Eles estão usando o típico "carregador lento".
Então, você tem que carregá-lo para salvá-lo.
Role e carregue, até não ter mais nada para carregar. Não role para cima.
Então você pode:
Salvar como
my-saved-post.html
.Abra com seu navegador.
Quão quebrado fica o layout sem carregar todos os componentes externos?
Geralmente não é tão ruim. Agora você terá todas as postagens.
Limpe o HTML o quanto desejar. Agora você tem em
.html
formatoVocê terá tudo, menos o conteúdo do carregador.
Eu estava olhando aquela imagem e percebi que é um
.html
arquivo de 2,2mb?! Você pode ter o conteúdo dos carregadores lentos. Você simplesmente não tem nenhuma funcionalidade do lado do servidor.Você deve tentar executar a página com Five-Server . Depois de instalado, renomeie
data.html
paraindex.html
. Em seguida, abra um terminal nesse diretório e digite:five-server
.Posso ter uma ideia para o seu arquivo PDF de solução alternativa suja. Acho que o repositório do Ubuntu tem isso. O link abaixo mostra as versões Fedora e FreeBSD. Você também pode obter a fonte do Poppler, se preferir.
pdftohtml versão 24.02.0
Copyright 2005-2024 The Poppler Developers - http://poppler.freedesktop.org
Faz um trabalho razoável. Eu testei em um arquivo PDF textual. Aqui está a saída: