Imprimer une facture après un fetch

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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 :
Pièce jointe 295102

18/07/2017, 20h48
badaze

Et quel est le problème ?
18/07/2017, 21h33
danielhagnoul

:salut:

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 ?
19/07/2017, 09h22
Maitre2B

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.

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:

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);
    });
});