Ich arbeite an einer HTML-Tabelle und html-to-paper
drucke 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.engineer
ist 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-print
Plugin 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
Antworten:
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
quelle
inputs
wird, 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 einUSB Printer
a4-Blatt verwende.@page
CSS-Regel ( developer.mozilla.org/en-US/docs/Web/CSS/@page ), wie hier erläutert. stackoverflow.com/questions / 44064707 /…Wie bereits erwähnt, ist dies mit dem von Ihnen verwendeten Paket nicht möglich, da die gebundenen Daten von
v-model
beim Drucken nicht vorhanden sind. Sie müssen diese Daten also statisch in Ihrem HTML-Code abrufen. QuelleEine Problemumgehung wäre die Verwendung von Eingabeplatzhaltern:
Fügen Sie Ihrer Tabelle einen Verweis hinzu :
Auf diese Weise können Sie dieses Element in Ihrer Methode auswählen. Ändern Sie nun die Druckmethode:
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ückzusetzen
input.value = input.value
, aber leider hat das nicht funktioniert.Hier wurde Ihr Code aktualisiert
quelle
styles
Option vue-html-to-paper wie bei den anderen Stylesheets verwenden.Entsprechend Ihrer neuen Prämie für die Frage finden Sie
vue-html-to-paper
hier 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-nb
Paket 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-nb
das Problem dieser Lösung später behoben wird und meine Antwort aktualisiert wird.quelle
input fields
aber alle.print-nb
wie das ist das beste zu Arbeit mit , aber ich weiß nicht , warum Browser CSS erlaubt