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 à l'aide de html-to-paper dans 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 aucune donnée montrant uniquement 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 de
ux.engineerest très bien mais provoque un problème avec le navigateur crome et firefox le bloquent pour des raisons de sécurité
Veuillez vérifier le code sandbox par exemple voici mon code complet, j'essaie de donner du style mais ça n'arrive pas
- Le
html-to-printle plugin 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 changeant le package utilisé ici en 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érerais 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.
Comme d'autres l'ont mentionné, cela n'est pas possible avec le package que vous utilisez, car les données liées de v-model n'existe pas lors de l'impression. Vous devez donc obtenir ces données de manière statique dans votre html. Source
Une solution de contournement consisterait à utiliser des espaces réservés d'entrée:
Ajoutez un 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é en quelque sorte reset la valeur de l'entrée, comme input.value = input.value, mais malheureusement cela n'a pas fonctionné.
Selon votre nouvelle prime sur la question, pour s'en tenir à utiliser vue-html-to-paper, voici un exemple de code mis à jour pour le chargement d'une 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 !important remplacer la couleur d'arrière-plan par le vert.
Chrome sous Windows applique ce style d'arrière-plan vert aux entrées si l'option d'impression graphiques d'arrière-plan est appliquée. Firefox sur Windows a un panneau d'options d'impression différent, qui n'a pas un tel paramètre.
Pourtant, les deux appliquent Bootstrap styles 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 de la portée de cette question.
PS. Je ne sais pas quel genre de problème de sécurité il y avait avec vue-print-nb package mais peut-être pourrait-il ê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 comme entrée distincte si cette vue-print-nb Le problème de la solution est résolu plus tard et ma réponse sera mise à jour.