Drukowanie elementów za pomocą VueJS przy użyciu bibliotek stron trzecich

14

Pracuję nad tabelą HTML i html-to-paperdrukuję 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

Sprawdź działający kod

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.engineerudzielona 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-printzastosowania 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ństwatak mówi się podczas korzystania z print-nb

manish thakur
źródło
manish thakur, proszę sprawdź moją nową odpowiedź (okres łaski nagród kończy się za 4 godziny, po których
przepadnie,

Odpowiedzi:

9

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

ux.inżynier
źródło
1
Nie wiem, jak wyglądają te pakiety drukujące, ale jeśli zmiana pakietów jest w porządku, myślę, że jest to lepsze rozwiązanie niż moje obejście z symbolami zastępczymi.
arkuuu
@ ux.engineer, ponieważ znalazłem twój pomysł jako bardzo prosty i czysty, mam wątpliwości (problem) tutaj, kiedy drukuję stół, drukuje całą stronę z inputswewną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 Printerktóry nie ma A4 arkuszy.
manish thakur,
@manishthakur możesz używać globalnego stylu CSS z zapytaniami o media skierowanymi do drukowania, oto działający przykład: codeandbox.io/s/ecstatic-fire-zo2b2
ux.engineer
Ok, to działa, więc mogę zdefiniować cs, problem jest tutaj, załóżmy, że są tam cztery rzędy, ale drukarka drukuje drukarkę o pełnej długości, używam drukarki USB, która jest użytkownikiem do drukowania rachunków, proszę wyczyść mi to
manish thakur,
@manishthakur, co powiesz na to: codeandbox.io/s/charming-sound-7h1bg - używając @pagereguły CSS ( developer.mozilla.org/en-US/docs/Web/CSS/@page ), jak wyjaśniono tutaj stackoverflow.com/questions / 44064707 /…
ux.inineine
6

Jak wspomnieli inni, nie jest to możliwe w pakiecie, którego używasz, ponieważ powiązane dane z v-modelnie istnieją podczas drukowania. Musisz więc statycznie umieścić te dane w pliku HTML. Źródło

Obejściem byłoby użycie symboli zastępczych wprowadzania danych:

Dodaj odniesienie do swojej tabeli:

<tbody ref="tablebody">

Pozwala to wybrać ten element w metodzie. Teraz zmień metodę drukowania:

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

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

arkuuu
źródło
1
Sprytne rozwiązanie, choć nieco zuchwałe. Wydaje się jednak konieczne, jeśli ktoś chce trzymać się tego konkretnego miksu Vue do drukowania takich dynamicznych wartości. Jednak w tym momencie szukałem alternatywnych pakietów.
ux.inineer
@arkuuu Proszę sprawdzić moją część do edycji, kiedy tylko będziecie wolni.
manish thakur
@manishthakur Przeczytałem, ale nie mam pojęcia. Być może możesz dołączyć umieścić reguły drukowania css w osobnym pliku css i użyć stylesopcji vue-html-to-paper, tak jak w przypadku innych arkuszy stylów.
arkuuu
1
Próbowałem tego, ale nic się nie zmieniło, ale nadal nie przyjmuje to stylów
manish thakur
0

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 !importantprzesł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-nbpakiecie, 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-nbproblem zostanie rozwiązany później i moja odpowiedź zostanie zaktualizowana.

ux.inżynier
źródło
Hej, sprawdzam, czy nie bierze idealnie stylów, kiedy próbuję je usunąć, input fields ale zajmuje je wszystkie.
manish thakur
Nie jest jasne, które style próbujesz zastosować ... Jak już wspomniano, style nie przychodzą do drukowania w taki sam sposób, jak w przeglądarce, ponieważ istnieją ograniczenia. Nawet te różnią się w zależności od przeglądarki / platformy. Ale arkusz stylów Bootstrap jest stosowany , prawda? I moje przesłonięcie, więc style są ładowane?
ux.inżynier
Nie, usuwam pola wejściowe, ale nie usuwam, ponieważ chcę usunąć pole wejściowe i pokazać je jako tabelę bazową z pewnym stylem, który chcę nadać na wydruku, tj. Rozmiar i wyrównanie czcionki, ale nie zajmuje, chowam się kolumna też, ale na wydruku zajmuje je wszystkie
manish thakur
Hej, możesz zgadnąć, z czym jest problem, print-nbponieważ jest to najlepszy do pracy, ale nie wiem, dlaczego przeglądarka nie zezwala na css
Manish Thakur