1. Implémentation avec le plugin vue-print-nb

Pour imprimer des sections spécifiques d'une applciation Vue, utilisez vue-print-nb qui offre un contrôle précis sur le contenu à imprimer.

1.1 Installation du package

npm install vue-print-nb --save

1.2 Configuration dans le fichier principal

import Impression from 'vue-print-nb'
Vue.use(Impression)

1.3 Liaison du bouton d'impression

<el-button v-print="configImpression">Imprimer</el-button>

1.4 Définision des paramètres d'impression

data() {
    return {
        configImpression: {
            id: 'zone-a-imprimer',
            extraHead: '<meta charset="UTF-8"/>',
            popTitle: 'En-tête personnalisé',
        },
    }
}

1.5 Ciblage de la zone à imprimer

<el-table id="zone-a-imprimer" v-loading="chargement" :data="listeClients" stripe border>
    <el-table-column v-if="afficherColonne('nom')" label="Nom" align="center" prop="nom"/>
    <el-table-column v-if="afficherColonne('ordre')" label="Ordre" align="center" prop="ordre" width="200"/>
    <el-table-column v-if="afficherColonne('dateCreation')" label="Date de création" align="center" prop="dateCreation" width="300"/>
</el-table>

1.6 Styles pour une impression complète

<style media="print">
  @media print {
    @page {
      size: auto;
      margin: 10mm;
    }
    html {
      zoom: 85%;
    }
    #zone-a-imprimer table {
      table-layout: fixed !important;
    }
    #zone-a-imprimer .el-table__header {
      width: 100% !important;
    }
    #zone-a-imprimer .el-table__body {
      width: 100% !important;
    }
    td {
      border: 1px solid #ddd;
      padding: 8px;
    }
  }
</style>

1.7 Paramètres disponibles

2. Implémentation avec le plugin print-js

Cette méthode permet d'imprimer des données au format JSON, idéal pour les rapports structurés.

2.1 Installation

npm install print-js --save

2.2 Importation dans le composant

import printJS from 'print-js'

2.3 Déclenchement de l'impression

<el-button @click="genererImpression">Imprimer</el-button>

2.4 Logique d'impression

genererImpression() {
    const donneesFormatees = this.items.map(element => ({
        champ1: element.titre,
        champ2: element.position,
        champ3: element.horodatage,
    }));
    printJS({
        type: 'json',
        header: 'Rapport imprimé',
        headerStyle: 'text-align: center; font-size: 20px;',
        printable: donneesFormatees,
        properties: [
            { field: 'champ1', displayName: 'Titre', columnSize: 1 },
            { field: 'champ2', displayName: 'Position', columnSize: 1 },
            { field: 'champ3', displayName: 'Horodatage', columnSize: 1 }
        ],
        gridHeaderStyle: 'background: #f0f0f0; font-weight: bold; padding: 10px;',
        gridStyle: 'text-align: left; padding: 5px; border: 1px solid #ccc;',
        repeatTableHeader: false,
    });
}

2.5 Configuration avancée