Drucken von Elementen mit VueJS mithilfe von Bibliotheken von Drittanbietern

14

Ich arbeite an einer HTML-Tabelle und html-to-paperdrucke diese Tabelle mit vue.js auf einen Drucker. Ich mache das Klicken, um eine neue Zeile zu erstellen, und dann das Klicken, um zu drucken. Ich versuche, die Tabelle zu drucken, aber es dauert nicht Alle Daten zeigen nur leere Zellen

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");

hier der Arbeitscode in Codesandbox

Bitte überprüfen Sie den laufenden Code

Nach Kopfgeld bearbeiten

Ich muss es mit 'HTML-zu-Papier' machen. Das Problem ist, dass ich meinen Elementen keinen Stil zum Drucken geben kann @media print

  • Die Antwort von ux.engineerist in Ordnung, aber aufgrund des Browserproblems blockieren crome und Firefox es aus Sicherheitsgründen

Bitte überprüfen Sie Code Sandbox zum Beispiel hier ist mein vollständiger Code, ich versuche, Styling zu geben, aber nicht passiert

  • Das html-to-printPlugin verwendet window.open. Wenn ich also auf "Drucken" klicke, wird der Stil nicht auf eine neue Seite übertragen.
  • Hier stecke ich fest, warum es keinen Medienstil annimmt. Wie kann ich meinen Stil auf window.open überschreiben?

Ich habe print-nb verwendet, aber es funktioniert aus Sicherheitsgründen nicht im BrowserDies wird bei der Verwendung von print-nb gesagt

manish thakur
quelle
manish thakur bitte
schau dir

Antworten:

9

Leider können Sie die Datenbindung von Vue nicht mit diesem mycurelabs / vue-html-to-paper-Mixin-Paket nutzen , wie hier vom Paketautor angegeben .

Ich habe jedoch eine Problemumgehung erstellt, indem ich das hier verwendete Paket auf die Direktive Power-kxLee / vue-print-nb umgestellt habe .

Hier ist ein funktionierendes Beispiel: https://codesandbox.io/s/zen-sunset-2szqr

PS. Die Wahl zwischen ähnlichen Paketen kann manchmal schwierig sein. Man sollte die Nutzungs- und Aktivitätsstatistiken des Repos wie folgt bewerten: Verwendet von, Beobachten und Starten auf der Startseite, dann offene / geschlossene Probleme und aktive / geschlossene Pull-Anfragen überprüfen und dann zu Insights gehen, um Pulse (1 Monat) zu überprüfen, und Code-Häufigkeit.

Zwischen diesen beiden würde ich vue-print-nb wählen , um populärer und aktiver zu sein. Auch weil ich lieber eine Direktive als ein Mixin verwenden würde .

Was die andere Antwort angeht, würde die Verwendung von vue-html-to-paper für diesen Zweck eine solche hackige Lösung erfordern ... Wo diese Richtlinie sofort funktioniert.

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

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

ux.engineer
quelle
1
Ich weiß nicht, wie diese Druckpakete verglichen werden, aber wenn es in Ordnung ist, Pakete zu wechseln, ist dies meiner Meinung nach eine bessere Lösung als meine Problemumgehung mit Platzhaltern.
Arkuuu
@ ux.engineer Da ich Ihre Idee als sehr einfach und sauber empfand, habe ich hier einen Zweifel (ein Problem), wenn ich die Tabelle drucke, mit der eine ganze Seite gedruckt inputswird, was nicht gut ist. Ich möchte diese Eingabe entfernen und es sein Wie bei einem normalen Feld kann ich auch die Höhe verwalten, da ich ein USB Printera4-Blatt verwende.
Manish Thakur
@manishthakur Sie können globales CSS-Styling mit Media Query Targeting Print verwenden. Hier ist ein funktionierendes Beispiel: Codesandbox.io/s/ecstatic-fire-zo2b2
ux.engineer
Ok, es funktioniert, damit ich das cs definieren kann. Das Problem ist, dass hier vier Zeilen vorhanden sind, aber der Drucker druckt einen Drucker mit voller Länge. Ich verwende einen USB-Drucker, der Benutzer zum Drucken von Rechnungen ist. Bitte klären Sie diese Sache für mich
Manish Thakur
@manishthakur wie wäre es damit: Codesandbox.io/s/charming-sound-7h1bg - unter Verwendung der @pageCSS-Regel ( developer.mozilla.org/en-US/docs/Web/CSS/@page ), wie hier erläutert. stackoverflow.com/questions / 44064707 /…
ux.engineer
6

Wie bereits erwähnt, ist dies mit dem von Ihnen verwendeten Paket nicht möglich, da die gebundenen Daten von v-modelbeim Drucken nicht vorhanden sind. Sie müssen diese Daten also statisch in Ihrem HTML-Code abrufen. Quelle

Eine Problemumgehung wäre die Verwendung von Eingabeplatzhaltern:

Fügen Sie Ihrer Tabelle einen Verweis hinzu :

<tbody ref="tablebody">

Auf diese Weise können Sie dieses Element in Ihrer Methode auswählen. Ändern Sie nun die Druckmethode:

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 = "";
  }
}

Dann stylen Sie die Platzhalter möglicherweise mit CSS, da sie standardmäßig grau aussehen.

Ich habe zuerst versucht, den Wert der Eingabe irgendwie zurückzusetzeninput.value = input.value , aber leider hat das nicht funktioniert.

Hier wurde Ihr Code aktualisiert

Arkuuu
quelle
1
Eine clevere Lösung, wenn auch etwas hackig. Dies scheint jedoch erforderlich zu sein, wenn Sie dieses spezielle Vue-Mixin zum Drucken solcher dynamischer Werte verwenden möchten. An dieser Stelle würde ich jedoch nach alternativen Paketen suchen.
ux.engineer
@arkuuu Bitte überprüfe meinen Bearbeitungsteil, wann immer du frei sein wirst.
Manish Thakur
@manishthakur Ich habe es gelesen, aber ich habe keine Ahnung. Vielleicht können Sie Ihre CSS-Druckregeln in eine separate CSS-Datei einfügen und die stylesOption vue-html-to-paper wie bei den anderen Stylesheets verwenden.
Arkuuu
1
Ich habe das versucht, aber nichts hat sich geändert, trotzdem nimmt es keine Stile an
manish thakur
0

Entsprechend Ihrer neuen Prämie für die Frage finden Sie vue-html-to-paperhier ein aktualisiertes Codebeispiel zum Laden des externen Stylesheets in das Druckfenster .

Es lädt zuerst Bootstrap-Stile von einem externen CDN und dann eine lokale CSS-Datei aus dem öffentlichen Verzeichnis. Dieses lokale Stylesheet verfügt nur über einen Stil für die Verwendung der !importantÜberschreibung für die Eingabe der Hintergrundfarbe in Grün.

Chrome unter Windows wendet diesen grünen Hintergrundstil auf Eingaben an, wenn Hintergrundgrafiken für Druckoptionen angewendet werden. Firefox unter Windows verfügt über ein anderes Druckoptionsfeld, für das keine solche Einstellung vorhanden ist.

Beide wenden jedoch zumindest teilweise Bootstrap-Stile an, sodass die Stylesheets geladen und im Spiel sind.

Dieses Problem mit dem Hintergrundstil der Eingabe sollte Unterschiede im Umgang der Browser mit Druckstilen aufzeigen. Es ist ein umfassenderes Thema, das außerhalb des Rahmens dieser Frage liegt.

PS. Ich bin nicht sicher, welche Art von Sicherheitsproblem es mit dem vue-print-nbPaket gab, aber vielleicht könnte es gelöst werden. Sie sollten ein Problem in ihrem Github-Repo mit einem Beispiel für eine minimale Fehlerreproduktion öffnen.

Hinzufügen dieser Antwort als separater Eintrag, wenn vue-print-nbdas Problem dieser Lösung später behoben wird und meine Antwort aktualisiert wird.

ux.engineer
quelle
Hey, ich überprüfe, ob Stile nicht perfekt aufgenommen werden, da ich versuche, sie zu entfernen, input fields aber alle.
Manish Thakur
Es ist unklar, welche Stile Sie anwenden möchten ... Wie bereits erwähnt, werden Stile nicht auf dieselbe Weise gedruckt wie im Browser, da es Einschränkungen gibt. Und selbst diese variieren zwischen den Browsern / Plattformen. Aber das Bootstrap-Stylesheet wird angewendet , nicht wahr? Und meine Überschreibung, damit Stile geladen werden?
ux.engineer
Nein, ich entferne die Eingabefelder, aber es wird nicht entfernt, da ich das Eingabefeld entfernen und es als Basich-Tabelle mit einem Stil anzeigen möchte, den ich beim Drucken angeben möchte, dh Schriftgröße und Ausrichtung, aber es nimmt nicht, ich verstecke mich eine Kolumne auch, aber in gedruckter Form nimmt sie alle
manish thakur
Hey Können Sie erraten , was ist das Problem mit , print-nbwie das ist das beste zu Arbeit mit , aber ich weiß nicht , warum Browser CSS erlaubt
manish thakur