Tem margens para o conteúdo, mas não a fundo em cada página quando a conversão e impressão de HTML para PDF

0

Pergunta

Estou trabalhando em um site que precisa para exportar o conteúdo de uma página da web como um arquivo pdf, mas tem de respeitar as seguintes condições:

  • O fundo tem que ser totalmente impresso em cada página
  • O conteúdo não deve sobrepor-se o plano de fundo

Desde que o site usa PHP eu tentei usar o mPDF que eu usei anteriormente em outro PHP site que tinha as mesmas condições. mPDF mostrou o completo plano de fundo em cada página do arquivo pdf, mesmo quando a página não foi completamente preenchido com o conteúdo e que eu poderia definir margens, que afetou o conteúdo, mas não a fundo o que ainda cobria toda a página.

Infelizmente, mPDF não é trabalhar com este novo site, muito provavelmente porque ele usa bootstrap e flex layouts (ele me devolveu um pdf com cerca de mil páginas, principalmente em branco, outros com muito ampliada em pedaços de página), em cima de que parte do conteúdo é alterado pelo javascript antes de apresentá-lo para o usuário e que não foi levado em conta pelo mPDF (notei que foi quando eu removido bootstrap.css o que me permitiu ver o resultado da conversão).

Então eu mudei para marionetista https://github.com/puppeteer/puppeteer o que imprime o conteúdo bem a usar o chrome sob o capô, mas estou tendo alguns problemas. O primeiro problema foi que eu não conseguia imprimir o plano de fundo em cada página, mas eu resolvi que ao escrever esta questão através da criação de uma div com position: fixed e width e height no 100% que funciona como pano de fundo

O segundo problema é que quando eu definir as margens em puppeteer (que, no final, são as mesmas margens de impressão no chrome) que afetam o plano de fundo também (isso foi um problema, mesmo antes de criar o fixo div), de modo que eu não consigo encontrar uma forma para que o texto não se sobrepõem ao fundo

Aqui você pode ver um exemplo: https://stackblitz.com/edit/web-platform-vlfqfz?file=index.html

Se você abrir a visualização em outra aba e tente imprimi-lo, você pode ver o problema que estou enfrentando

google-chrome printing puppeteer
2021-11-23 10:09:26
1

Melhor resposta

0

Então, aparentemente, não é possível fazer o que eu estava perguntando exatamente nesta questão, de modo que eu encontrei uma solução alternativa.
Eu cortei a parte superior e a parte inferior do fundo e usou-as como imagens dentro marionetista o cabeçalho e o rodapé. Demorou um tempo para fazer as imagens coincidem com o position: fixed div que atua como plano de fundo (que agora contém apenas os lados do plano de fundo), mas a definição de uma largura fixa no corpo do trabalho

2021-11-24 15:44:17

Em outros idiomas

Esta página está em outros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................