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