Je travaille sur un tableau HTML et j'imprime ce tableau sur l'imprimante en utilisant 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 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.engineer
est 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-print
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é
Réponses:
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
la source
inputs
intérieur, ce qui n'est pas bon, je veux supprimer cette entrée et que ce soit comme un champ normal, je peux aussi gérer la hauteur, car j'utiliseUSB Printer
qui n'a pas de feuilles a4.@page
règle CSS ( developer.mozilla.org/en-US/docs/Web/CSS/@page ) comme expliqué ici stackoverflow.com/questions / 44064707 /…Comme d'autres l'ont mentionné, cela n'est pas possible avec le package que vous utilisez, car les données liées
v-model
n'existent pas lors de l'impression. Vous devez donc obtenir ces données de manière statique dans votre html. La sourceUne solution de contournement consisterait à utiliser des espaces réservés d'entrée:
Ajoutez une référence à votre table:
Cela vous permet de sélectionner cet élément dans votre méthode. Modifiez maintenant la méthode d'impression:
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
la source
styles
option de vue-html-to-paper comme vous l'avez fait avec les autres feuilles de style.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
!important
remplacement 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-nb
paquet 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-nb
le problème de cette solution est résolu plus tard et que ma réponse est mise à jour.la source
input fields
mais il les prend tous.print-nb
car c'est le meilleur avec lequel travailler, mais je ne sais pas pourquoi le navigateur n'autorise pas css