Estoy trabajando en la tabla HTML e imprimiendo esa tabla en la impresora usando html-to-paper
vue.js, lo que estoy haciendo es hacer clic en agregar creando una nueva fila y luego en hacer clic en imprimir Estoy tratando de imprimir la tabla pero no está tomando cualquier dato que solo muestre celdas vacías
Código 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");
aquí el código de trabajo en codesandbox
Por favor verifique el código de ejecución
Editar según la recompensa
tengo que hacerlo con 'html-to-paper' el problema es que no puedo dar estilo a mis elementos para imprimir usando @media print
- La respuesta
ux.engineer
está bien, pero al causar problemas de navegador, Chrome y Firefox lo están bloqueando debido a problemas de seguridad.
Comprueba el código sandbox, por ejemplo, aquí está mi código completo, estoy tratando de dar estilo pero no sucede
- El
html-to-print
complemento usa window.open, de modo que cuando hago clic en imprimir no lleva el estilo a una nueva página. - Ahí es donde estoy atrapado, por qué no está tomando estilo de medios, ¿cómo puedo anular mi estilo en la ventana?
Estaba usando print-nb Pero no funciona en el navegador debido a alguna razón de seguridad