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

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ństwa

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

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

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.