Pracuję nad tabelą HTML i html-to-paper
drukuję tę tabelę na drukarce przy użyciu vue.js. Po kliknięciu dodaj dodaj nowy wiersz, a następnie po kliknięciu wydruku próbuję wydrukować tabelę, ale to nie zajmuje wszelkie dane pokazujące tylko puste komórki
Kod 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");
tutaj działający kod w codeandbox
Edytuj zgodnie z nagrodą
muszę to zrobić z „HTML-to-paper” Problem polega na tym, że nie jestem w stanie nadać stylu moim elementom do drukowania przy użyciu @media print
- Odpowiedź
ux.engineer
udzielona przez jest w porządku, ale powoduje awarie przeglądarki i Firefox blokuje ją z powodu problemów z bezpieczeństwem
Sprawdź kod piaskownicy, na przykład tutaj jest mój pełny kod, próbuję nadać styl, ale nic się nie dzieje
- Do
html-to-print
zastosowania plugin window.open więc kiedy ja klikając na wydruku nie bierze styl do nowej strony. - Właśnie dlatego utknąłem, dlaczego nie biorę stylu medialnego, jak mogę zastąpić mój styl na window.open
Korzystałem z print-nb Ale to nie działa w przeglądarce z jakiegoś powodu bezpieczeństwa
Odpowiedzi:
Niestety, nie można wykorzystać powiązania danych Vue z tym pakietem miks mycurelabs / vue-html-to-paper , jak stwierdził tutaj autor pakietu .
Jednak stworzyłem obejście tego problemu, zmieniając używany tutaj pakiet na dyrektywę Power-kxLee / vue-print-nb .
Oto działający przykład: https://codesandbox.io/s/zen-sunset-2szqr
PS. Wybór pomiędzy podobnymi pakietami może być czasem trudny. Na pierwszej stronie należy ocenić statystyki użycia i aktywności repozytorium, takie jak: Używany przez, Oglądaj i Start, a następnie zaznacz opcję Otwarte / Zamknięte i Aktywne / Zamknięte żądania ściągania, a następnie przejdź do Statystyki, aby sprawdzić Pulse (1 miesiąc), i Częstotliwość kodu
Pomiędzy tymi dwoma wybrałbym vue-print-nb za to, że jest bardziej popularny i aktywnie wykorzystywany. Także dlatego, że wolałbym używać dyrektywy zamiast mixin .
Jeśli chodzi o drugą odpowiedź, dalsze używanie vue-html-to-paper do tego celu wymagałoby takiego hacky rozwiązania ... Gdzie, jak ta dyrektywa, działa od razu po wyjęciu z pudełka.
https://github.com/mycurelabs/vue-html-to-paper
https://github.com/Power-kxLee/vue-print-nb
źródło
inputs
wewnątrz, co nie jest dobre, chcę usunąć to wejście i niech tak będzie jak normalne pole, mogę również zarządzać wysokością, ponieważ używam,USB Printer
który nie ma A4 arkuszy.@page
reguły CSS ( developer.mozilla.org/en-US/docs/Web/CSS/@page ), jak wyjaśniono tutaj stackoverflow.com/questions / 44064707 /…Jak wspomnieli inni, nie jest to możliwe w pakiecie, którego używasz, ponieważ powiązane dane z
v-model
nie istnieją podczas drukowania. Musisz więc statycznie umieścić te dane w pliku HTML. ŹródłoObejściem byłoby użycie symboli zastępczych wprowadzania danych:
Dodaj odniesienie do swojej tabeli:
Pozwala to wybrać ten element w metodzie. Teraz zmień metodę drukowania:
Może stylizujesz symbole zastępcze za pomocą css, ponieważ domyślnie jest szary.
Najpierw próbowałem jakoś zresetować wartość wejścia, na przykład
input.value = input.value
, ale niestety to nie zadziałało.Zaktualizowałem swój kod tutaj
źródło
styles
opcji vue-html-to-paper, tak jak w przypadku innych arkuszy stylów.Zgodnie z twoją nową nagrodą za pytanie, dla trzymania się
vue-html-to-paper
, oto zaktualizowany przykład kodu do ładowania arkusza stylów zewnętrznych do okna drukowania .Najpierw ładuje style Bootstrap z zewnętrznego CDN, a następnie z lokalnego pliku CSS z katalogu publicznego. Ten lokalny arkusz stylów ma tylko jeden styl do używania
!important
przesłonięcia dla wejściowego koloru tła na zielony.Chrome w systemie Windows stosuje ten styl zielonego tła do danych wejściowych, jeśli zastosowano grafikę tła opcji drukowania . Firefox w systemie Windows ma inny panel opcji drukowania, który nie ma takiego ustawienia.
Jednak oba stosują style Bootstrap co najmniej częściowo, więc arkusze stylów są ładowane i odtwarzane.
Ten wejściowy problem ze stylem tła miał pokazać różnice w sposobie, w jaki przeglądarki obsługują style drukowania, i jest to szerszy temat poza zakresem tego pytania.
PS. Nie jestem pewien, jaki problem bezpieczeństwa występował w
vue-print-nb
pakiecie, ale być może można go rozwiązać. Powinieneś otworzyć problem w repozytorium Github z minimalnym przykładem reprodukcji błędów.Dodanie tej odpowiedzi jako osobnego wpisu, jeśli
vue-print-nb
problem zostanie rozwiązany później i moja odpowiedź zostanie zaktualizowana.źródło
input fields
ale zajmuje je wszystkie.print-nb
ponieważ jest to najlepszy do pracy, ale nie wiem, dlaczego przeglądarka nie zezwala na css