Elemen pencetakan dengan VueJS menggunakan perpustakaan pihak ke-3

Saya bekerja pada tabel HTML dan dan mencetak tabel itu ke printer menggunakan html-to-paperdi vue.js, Apa yang saya lakukan adalah mengklik klik membuat baris baru dan kemudian klik cetak saya mencoba untuk mencetak tabel tetapi tidak mengambil data apa pun hanya menampilkan sel kosong

Kode 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");

di sini kode yang berfungsi di codesandbox

Silakan periksa kode yang sedang berjalan

Edit sesuai karunia

saya harus melakukannya dengan 'html-ke-kertas' masalahnya adalah saya tidak bisa memberi gaya pada elemen saya untuk dicetak menggunakan @media print

• Jawabannya ux.engineerbaik-baik saja tetapi menyebabkan masalah browser crome dan firefox memblokirnya karena masalah keamanan

Silakan periksa kode sandbox misalnya di sini adalah kode lengkap saya, saya mencoba memberikan gaya tetapi tidak terjadi

• The html-to-printpenggunaan Plugin window.open jadi ketika saya mengklik cetak tidak mengambil gaya ke halaman baru.
• Di situlah saya terjebak mengapa tidak mengambil gaya media, bagaimana saya bisa mengganti gaya saya di window.open

Saya Menggunakan print-nb Tetapi tidak berfungsi di browser karena beberapa alasan keamanan

Sayangnya Anda tidak dapat memanfaatkan pengikatan data Vue dengan paket mixin mycurelabs / vue-html-to-paper ini , seperti yang dinyatakan di sini oleh pembuat paket .

Namun, saya telah membuat solusi untuk mengalihkan paket yang digunakan di sini ke direktif Power-kxLee / vue-print-nb .

Berikut ini contoh yang berfungsi: https://codesandbox.io/s/zen-sunset-2szqr

PS. Memilih di antara paket-paket serupa kadang-kadang sulit. Orang harus mengevaluasi statistik penggunaan dan aktivitas repo seperti: Digunakan oleh, Tonton, dan Mulai di halaman depan, lalu periksa Masalah Terbuka / Tertutup dan Permintaan Tarik Aktif / Tertutup, lalu buka Wawasan untuk memeriksa Pulsa (1 bulan), dan Frekuensi Kode.

Di antara keduanya, saya akan memilih vue-print-nb karena lebih populer dan aktif digunakan. Juga karena saya lebih suka menggunakan arahan daripada mixin .

Sejauh jawaban lain, menjaga menggunakan vue-html-to-paper untuk tujuan ini akan membutuhkan solusi hacky ... Di mana arahan ini bekerja di luar kotak.

https://github.com/mycurelabs/vue-html-to-paper

https://github.com/Power-kxLee/vue-print-nb

Seperti yang telah disebutkan orang lain, ini tidak mungkin dengan paket yang Anda gunakan, karena data yang terikat dari v-modeltidak ada saat mencetak. Jadi, Anda perlu mendapatkan data ini secara statis di dalam html Anda. Sumber

Solusinya adalah menggunakan input placeholder:

Tambahkan referensi ke meja Anda:

<tbody ref="tablebody">

Ini memungkinkan Anda untuk memilih elemen ini dalam metode Anda. Sekarang ubah metode cetak:

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

Maka mungkin gaya penampung dengan css, karena terlihat abu-abu secara default.

Saya pertama kali mencoba mengatur ulang nilai input, seperti input.value = input.value, tapi sayangnya itu tidak berhasil.

Diperbarui kode Anda di sini

Sesuai karunia baru Anda pada pertanyaan, untuk tetap menggunakan vue-html-to-paper , berikut adalah contoh kode yang diperbarui untuk memuat stylesheet eksternal ke jendela cetak .

Pertama memuat gaya Bootstrap dari CDN eksternal, kemudian file CSS lokal dari direktori publik. Lembar gaya lokal ini hanya memiliki satu gaya untuk menggunakan !importantpenggantian untuk warna latar belakang input menjadi hijau.

Chrome pada Windows menerapkan gaya latar belakang hijau untuk input jika opsi latar belakang grafis diterapkan. Firefox pada Windows memiliki panel opsi cetak yang berbeda, yang tidak memiliki pengaturan seperti itu.

Namun keduanya menerapkan gaya Bootstrap setidaknya sebagian, sehingga stylesheet dimuat dan dimainkan.

Masalah gaya latar belakang input ini adalah untuk menunjukkan perbedaan dalam cara browser menangani gaya cetak, dan ini merupakan topik yang lebih luas di luar cakupan pertanyaan ini.

PS. Saya tidak yakin masalah keamanan apa yang ada dengan vue-print-nbpaket, tetapi mungkin itu bisa diselesaikan. Anda harus membuka masalah di repo Github mereka dengan contoh reproduksi bug minimal.

Menambahkan jawaban ini sebagai entri terpisah jika vue-print-nbmasalah solusi itu dipecahkan kemudian dan jawaban saya diperbarui.