bookstoreHTML/summere.html at main · mr-body/bookstoreHTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Without Bootstrap</title>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-lite.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-lite.min.js"></script>
    <style>
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #printFrame {
            display: none; /* Oculta o iframe */
        }
        #summernote {
            width: 794px; /* Largura da folha A4 em pixels */
            height: 1123px; /* Altura da folha A4 em pixels */
            padding: 15px; /* Padding de 15px */
            box-sizing: border-box; /* Inclui o padding na largura total */
            border: 1px solid #ccc; /* Borda opcional para a folha */
        }
        #printBtn {
            position: absolute;
            bottom: 20px;
            left: 20px;
            z-index: 10; /* Garante que o botão fique visível */
        }
    </style>
</head>
<body>
    <div id="summernote"></div>
    <button id="printBtn">Print</button>
    <iframe id="printFrame"></iframe> <!-- Iframe oculto -->

    <script>
        $(document).ready(function() {
            var markdownText = `
                <div style="padding:20px; margin: 10px;">
                    <h4 style="text-align: center;">
                        <span style="font-weight: normal;">República de Angola</span><br>
                        <span style="font-weight: normal;">Governo Provincial de Luanda</span><br>
                        <span style="font-weight: normal;">Ministério da Educação</span>
                    </h4>
                    <h2 style="text-align: center;">RELATÓRIO DE HOJE</h2>
                    <p style="text-align: left;">Para o Sr. <b>Walter Alexandre Santana.</b></p>
                    <p style="text-align: left;">No presente documento serão apresentados os temas...</p>
                </div>
            `;

            // Inicializa o Summernote com o conteúdo HTML
            $('#summernote').summernote({
                placeholder: 'Hello stand alone UI',
                tabsize: 2,
                width: 794,
                height: 880, // Altura da área editável
                toolbar: [
                    ['style', ['style', 'fontname']], // Adiciona a opção de escolha de fonte
                    ['font', ['bold', 'underline', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph', 'height']], // Adiciona a opção de espaçamento
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ]
            });

            // Define o conteúdo HTML inicial
            $('#summernote').summernote('code', markdownText);
        });

        $('#printBtn').on('click', function() {
            var content = $('#summernote').summernote('code'); // Obtém o conteúdo HTML
            var printFrame = document.getElementById('printFrame');

            printFrame.contentWindow.document.open();
            printFrame.contentWindow.document.write('<html><head><title>Print</title>');
            printFrame.contentWindow.document.write('<style>@page { size: A4; margin: 15mm; } body { font-family: Arial, sans-serif; background-color: white; }</style>');
            printFrame.contentWindow.document.write('</head><body>');
            printFrame.contentWindow.document.write(content);
            printFrame.contentWindow.document.write('</body></html>');
            printFrame.contentWindow.document.close(); // Fecha o documento

            printFrame.contentWindow.focus(); // Foca no iframe para garantir que o print funcione
            printFrame.contentWindow.print(); // Aciona o diálogo de impressão
        });
    </script>
</body>
</html>
s