Como funciona a impressão do Google Calendar?

Question

Estou construindo um calendário no Asp.net usando o jQuery e estou tentando implementar a impressão. Posso imprimir HTML simples ou imagens sem problemas. Mas não consigo descobrir como criar uma impressão como a impressão do Google Calendar.

Quando você pressiona a impressão em "Calendário Print Preview", a caixa de diálogo de impressão que pop -up tem mais opções (navegadores cruzados), de alguma forma como essa caixa de diálogo de impressão é diferente de uma impressão simples do navegador e eles parecem ter mais controle, como definir a impressão de paisagem, por exemplo .

Alguém sabe como implementar isso?

Obrigado

Answer 1

É apenas uma janela pop-up com algumas opções publicadas no script do lado do servidor que gera um documento .pdf.

Você poderia usar

<link media="print" rel="stylesheet" type="text/css" href="main.css" />

Para fazer algo semelhante sem usar o script do servidor que gera imagem/pdf.

Note o Media = "Print", isso significa que a folha de estilo dada será usada quando você imprimir a página. Você pode especificar regras CSS personalizadas (como ocultar navegação, fazer o calendário ficar bem no papel, etc.) lá.

EDITAR:

Em resposta ao comentário. Se você converter o HTML em PDF, ele ficará exatamente o mesmo. Quando você envia esse formulário no calendário do Google, eles pegam todas essas opções e geram PDF deles. Se você escolher a paisagem, eles girarão a página e recalcularão tudo para que ela se encaixe na página. Para simplificá-lo para você, eles desenham uma imagem no lado do servidor, de acordo com as opções que você envia e a colocam no PDF.

Não é tão simples assim se você nunca fez isso antes. Eu brincaria com o CSS e o JavaScript naquela página de impressão e veria se posso imitar algo assim alternando entre paisagem e retrato usando regras JS e CSS (faça 2 botões - "paisagem", "retrato", quando o usuário clica neles Você altera as regras CSS para o seu calendário para que ele se encaixe em tamanho de papel). Novamente, se você não estiver familiarizado com o CSS, será difícil.

Não há resposta definitiva, o caminho que o Google seguiu é muito bom, mas não é tão simples de reproduzir.

Mais informações nos comentários.