Imprimer une facture après un fetch

**Maitre2B** · 18/07/2017, 19h32

Bonjour à tous,

Cela fait plusieurs heures que je me casse les dents sur un problème de javascript ><'

Lorsque je clique sur le <button> IMPRIMER , je fais un fech qui récupère un object res.
rest.data contient la facture que je souhaite imprimer comme sur l'image.

Un exemple de la facture renvoyée (vous pouvez noter qu'il y a déjà du JS en bas pour lancer le Ctrl + P)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<head>
    <meta charset="UTF-8" />
 
    <style type="text/css" scoped>
 
        .print_order_td_address {
            border: 2px solid #B8B8B8;
            width: 320px;
            max-width: 320px;
            vertical-align: baseline;
            padding: 5px;
            font-style: italic;
            text-transform: uppercase;
        }
 
</head>
<body>
                        <td>
                            19,00*€
                        </td>
                        <td>1</td>
                        <td>
                            19,00*€
                        </td>
                    </tr>
                                    </tbody>
            </table>
 
 
<script type="text/javascript">
    try {
        var print_ie = document.execCommand('print', false, null);
    } catch (e) {
 
    }
 
    if (!print_ie) {
        window.print();
    }
</script>

Mon code JS qui récupère la facture :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
post(url)
        .then((res) => {
            if (res) {
               // lancer un Ctrl + P  de  res.data
            }
        })
        .catch(() => {
            // ok
        })
    ;

Le résultat que je souhaite après avoir cliquer sur le bouton Imprimer :
Nom : sans titre.png
Affichages : 611
Taille : 69,6 Ko

**badaze** · 18/07/2017, 20h48

Et quel est le problème ?

**danielhagnoul** · 18/07/2017, 21h33

Sur l'image jointe, on voit qu'aucune imprimante n'est sélectionnée. Le bouton "Modifier" ne propose pas le choix d'une imprimante ?

**Maitre2B** · 19/07/2017, 09h22

Le problème c'est que je récupère donc via un fetch un object contenant une facture et un bout de JS, mais je ne sais pas comment lancer la page d'impression.

**Maitre2B** · 19/07/2017, 09h33

Résolu :

Il faut utiliser un iframe que l'on affiche pas.
Le code JS va se charger quoi qu'il arrive de faire le Ctrl + P sur le document reçu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
const printButtons = document.querySelectorAll('.js-print-button');
 
const clickHandler = (e = event) => {
    const url = e.getAttribute('data-url');
    const iframe = document.createElement('iframe');
 
    if (!url) {
        return false;
    }
 
    iframe.src = url;
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
 
    return false;
};
 
Array.prototype.forEach.call(printButtons, (printButton) => {
    printButton.addEventListener('click', () => {
        clickHandler(printButton);
    });
});

Imprimer une facture après un fetch

JavaScript

Discussions similaires

Partager

Partager