Drucken von Elementen mit VueJS mithilfe von Bibliotheken von Drittanbietern

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 Browser

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

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

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.