Posts tagged javascript

Shift + Click

Hoje precisei fazer o seguinte: ao clicar em uma imagem, abre um link ‘x’ e ao segurar o botão shift e clicar na imagem abrir um link ‘y’. Aqui vai o código pra eu lembrar e pra quem interessar.

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
    function mouseClick(oEvent) {
        if (oEvent.shiftKey) {
            alert('com shift');
        } else {
            alert('sem shift');
        }
    }
</script>
<div style="width: 100px; height: 100px; background-color: #ff0000;" 
      onclick="mouseClick(event);">
</div>

ps.: testado Opera 9.64, Chrome 1.0.154.59, IE 7.0.5730.13, Firefox 3.0.10

Criando PDF com JavaScript

Sim meu caro leitor!

Você não leu errado, o título do post está correto.

Faz algum tempo que li um ‘feed’ sobre isso e hoje consegui testar e resolvi compartilhar a experiência.

Utilizando a biblioteca jsPDF é possível gerar um PDF com textos apenas com Javascript. Por enquanto é só texto mas nas próximas versão serão acrescentados suporte para imagens, links e fontes embutidas!

O mais interessante, na minha opinião, é que não roda no IE (e nem deveria, hunf!) porém é compatível com Firefox 3, Safari e Opera. Use Opera (mensagem subliminar)

Exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
 
function geraPDF() {
    // iniciar o jspdf
    jsPDF.init();
    // criar página    
    jsPDF.addPage();
    // escrever um texto na posição x = 20, y = 20
    jsPDF.text(20, 20, 'Olá Mundo!');
    // escrever um texto na posição x = 20, y = 30
    jsPDF.text(20, 30, 'PDF gerado por javascript (client-side)....');
    // gerar saída do PDF
    var out = jsPDF.output();
    var url = 'data:application/pdf;base64,' + Base64.encode(out);
    document.location.href = url;
}
</script>

Não pensei em nenhuma utilização fenomenal para o PDF gerado por javascript, mas fiz alguns testes gerando meu CV e um link para download do post em PDF. Ficou bacana e funcionou!

Tive problemas com o encoding dos acentos e pelo visto ainda não tem suporte.

Projeto muito interessante.