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

14

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éc'est ce qui est dit lors de l'utilisation de print-nb

manish thakur
la source
manish thakur s'il vous plaît vérifier ma nouvelle réponse (la période de grâce de la prime se termine dans 4 heures, après quoi elle sera perdue si elle n'est pas attribuée)
ux.engineer

Réponses:

9

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

ux.engineer
la source
1
Je ne sais pas comment ces packages d'impression se comparent, mais si vous pouvez changer de package, je pense que c'est une meilleure solution que ma solution de contournement avec les espaces réservés.
arkuuu
@ ux.engineer car j'ai trouvé votre idée très simple et propre, j'ai un doute (problème) ici lorsque j'imprime le tableau, il imprime une page entière avec l' inputsinté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'utilise USB Printerqui n'a pas de feuilles a4.
manish thakur
@manishthakur, vous pouvez utiliser un style CSS global avec une impression de ciblage des requêtes multimédias, voici un exemple de travail: codesandbox.io/s/ecstatic-fire-zo2b2
ux.engineer
Ok, cela fonctionne donc par ce que je peux définir le cs, le problème est ici, supposons que quatre lignes sont là, mais l'imprimante imprime une imprimante longue, j'utilise une imprimante USB qui est un utilisateur pour imprimer des factures, veuillez effacer cette chose pour moi
manish thakur
@manishthakur que diriez-vous de ceci: codesandbox.io/s/charming-sound-7h1bg - en utilisant la @pagerègle CSS ( developer.mozilla.org/en-US/docs/Web/CSS/@page ) comme expliqué ici stackoverflow.com/questions / 44064707 /…
ux.engineer
6

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

arkuuu
la source
1
Une solution intelligente, bien que peu hacky. Mais semble nécessaire si l'on veut s'en tenir à l'utilisation de ce mixin Vue particulier pour imprimer des valeurs dynamiques comme celle-ci. Cependant, à ce stade, je chercherais des packages alternatifs.
ux.engineer
@arkuuu S'il vous plaît vérifier ma partie d'édition chaque fois que vous serez libre.
Manish thakur
@manishthakur Je l'ai lu mais je n'en ai aucune idée. Vous pouvez peut-être inclure vos règles d'impression CSS dans un fichier CSS séparé et utiliser l' stylesoption de vue-html-to-paper comme vous l'avez fait avec les autres feuilles de style.
arkuuu
1
J'ai essayé ça mais rien n'a changé, ça ne prend toujours pas de styles
manish thakur
0

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.

ux.engineer
la source
Hé, je vérifie qu'il ne prend pas parfaitement les styles que j'essaie de supprimer, input fields mais il les prend tous.
manish thakur
On ne sait pas quels styles essayez-vous d'appliquer ... Comme dit, les styles ne s'impriment pas de la même manière que dans le navigateur, car il y a des restrictions. Et même ceux-ci varient entre les navigateurs / plates-formes. Mais la feuille de style Bootstrap est appliquée , n'est-ce pas? Et mon remplacement, donc les styles sont chargés?
ux.engineer
Non, je supprime les champs de saisie mais cela ne supprime pas, car je veux supprimer le champ de saisie et l'afficher sous forme de tableau basich avec un certain style que je veux donner à l'impression, c'est-à-dire la taille de la police et l'alignement mais cela ne prend pas, je me cache une colonne aussi mais sur papier ça les prend tous
manish thakur
Hey Pouvez-vous deviner quel est le problème, print-nbcar c'est le meilleur avec lequel travailler, mais je ne sais pas pourquoi le navigateur n'autorise pas css
manish thakur