Impression d'éléments avec VueJS à l'aide de bibliothèques tierces

Je travaille sur un tableau HTML et j'imprime ce tableau sur l'imprimante en utilisant html-to-paperdans vue.js, ce que je fais, c'est en cliquant sur ajouter en créant une nouvelle ligne, puis en cliquant sur imprimer, j'essaie d'imprimer le tableau mais il ne prend pas toutes les données ne montrant que des cellules vides

Code App.vue

    <template>
  <div id="app">
    <button type="button" @click="btnOnClick">Add</button>

    <div id="printMe">
      <table class="table table-striped table-hover table-bordered mainTable" id="Table">
    <thead>
      <tr>

        <th class="itemName">Item Name</th>
        <th>Quantity</th>
        <th>Selling Price</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(tableData, k) in tableDatas" :key="k">

        <td>
          <input class="form-control" readonly v-model="tableData.itemname" />
        </td>
        <td>
          <input class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.quantity" v-on:keyup="calculateQty(tableData)" />
        </td>
        <td>
          <input class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.sellingprice" v-on:keyup="calculateSPrice(tableData)" />
        </td>
        <td>
          <input readonly class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.amount" />
        </td>
      </tr>
    </tbody>
  </table>
    </div>
    <button @click="print">Print</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableDatas: []
    }

  },
  methods: {
    btnOnClick(v) {
      this.tableDatas.push({
        itemname: "item",
        quantity: 1,
        sellingprice: 55,
        amount: 55
      });
    },
     print() {
      this.$htmlToPaper('printMe');
    }
  }
};
</script>

<style>
</style>

main.js

 import Vue from "vue";
import App from "./App.vue";
import VueHtmlToPaper from "vue-html-to-paper";

Vue.config.productionTip = false;
Vue.use(VueHtmlToPaper);

new Vue({
  render: h => h(App)
}).$mount("#app");

ici le code de travail dans codesandbox

Veuillez vérifier le code en cours d'exécution

Modifier selon la prime

je dois le faire avec 'html-to-paper' le problème est que je ne suis pas en mesure de donner du style à mes éléments pour l'impression en utilisant @media print

• La réponse ux.engineerest correcte mais le problème de navigateur Crome et Firefox le bloquent en raison de problèmes de sécurité

Veuillez vérifier le code sandbox par exemple voici mon code complet, j'essaie de donner du style mais cela ne se produit pas

• Le html-to-printplugin utilise window.open donc quand je clique sur imprimer il ne prend pas le style sur une nouvelle page.
• C'est là que je suis bloqué car pourquoi il ne prend pas de style multimédia, comment puis-je remplacer mon style sur window.open

J'utilisais print-nb mais cela ne fonctionne pas sur le navigateur pour une raison de sécurité

Malheureusement, vous ne pouvez pas tirer parti de la liaison de données de Vue avec ce package de mixage mycurelabs / vue-html-to-paper , comme indiqué ici par l'auteur du package .

Cependant, j'ai créé une solution de contournement en basculant le package utilisé ici vers la directive Power-kxLee / vue-print-nb .

Voici un exemple de travail: https://codesandbox.io/s/zen-sunset-2szqr

PS. Le choix entre des packages similaires peut parfois être délicat. Il faut évaluer les statistiques d'utilisation et d'activité du référentiel comme: Utilisé par, Regarder et Démarrer sur la première page, puis vérifier les problèmes ouverts / fermés et les demandes d'extraction actives / fermées, puis aller dans Insights pour vérifier le pouls (1 mois), et Fréquence du code.

Entre ces deux, je choisirais vue-print-nb pour être plus populaire et utilisé activement. Aussi parce que je préfère utiliser une directive plutôt qu'un mixin .

En ce qui concerne l'autre réponse, continuer à utiliser vue-html-to-paper à cette fin nécessiterait ce type de solution hacky ... Où que cette directive fonctionne dès le départ.

https://github.com/mycurelabs/vue-html-to-paper

https://github.com/Power-kxLee/vue-print-nb

Comme d'autres l'ont mentionné, cela n'est pas possible avec le package que vous utilisez, car les données liées v-modeln'existent pas lors de l'impression. Vous devez donc obtenir ces données de manière statique dans votre html. La source

Une solution de contournement consisterait à utiliser des espaces réservés d'entrée:

Ajoutez une référence à votre table:

<tbody ref="tablebody">

Cela vous permet de sélectionner cet élément dans votre méthode. Modifiez maintenant la méthode d'impression:

print() {
  const inputs = this.$refs.tablebody.getElementsByTagName("input");
  for (let input of inputs) {
    input.placeholder = input.value;
  }
  this.$htmlToPaper("printMe");
  for (let input of inputs) {
    input.placeholder = "";
  }
}

Vous pouvez ensuite styliser les espaces réservés avec css, car il semble gris par défaut.

J'ai d'abord essayé de réinitialiser la valeur de l'entrée, comme input.value = input.value, mais malheureusement cela n'a pas fonctionné.

Mis à jour votre code ici

Selon votre nouvelle prime sur la question, pour continuer à utiliser vue-html-to-paper, voici un exemple de code mis à jour pour charger la feuille de style externe dans la fenêtre d'impression .

Il charge d'abord les styles Bootstrap à partir d'un CDN externe, puis un fichier CSS local à partir du répertoire public. Cette feuille de style locale n'a qu'un seul style pour utiliser le !importantremplacement de la couleur d'arrière-plan en vert.

Chrome sous Windows applique ce style d'arrière-plan vert aux entrées si les graphiques d'arrière-plan de l' option d'impression sont appliqués. Firefox sur Windows a un panneau d'options d'impression différent, qui n'a pas un tel paramètre.

Pourtant, les deux appliquent des styles Bootstrap au moins en partie, donc les feuilles de style sont chargées et en jeu.

Ce problème de style d'arrière-plan d'entrée était de démontrer les différences dans la façon dont les navigateurs gèrent les styles d'impression, et c'est un sujet plus large en dehors du champ de cette question.

PS. Je ne sais pas quel genre de problème de sécurité il y avait avec le vue-print-nbpaquet mais peut-être qu'il pourrait être résolu. Vous devriez ouvrir un problème dans leur dépôt Github avec un exemple de reproduction de bogue minimal.

Ajout de cette réponse en tant qu'entrée distincte si vue-print-nble problème de cette solution est résolu plus tard et que ma réponse est mise à jour.