Estou trabalhando na tabela HTML e, imprimindo essa tabela na impressora usando o html-to-papervue.js. O que estou fazendo é clicar em adicionar, criar uma nova linha e, em seguida, clicar em imprimir. Estou tentando imprimir a tabela, mas ela não está sendo usada. quaisquer dados mostrando apenas células vazias
Code 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");aqui o código de trabalho em codesandbox
Verifique o código em execução
Editar conforme a recompensa
eu tenho que fazer isso com 'html-to-paper', o problema é que não consigo dar estilo aos meus elementos para impressão usando @media print
- A resposta
ux.engineeré boa, mas o problema do navegador crome e o firefox o bloqueiam devido a problemas de segurança
Por favor, verifique a caixa de areia de código, por exemplo, aqui está o meu código completo, estou tentando dar um estilo, mas não está acontecendo
- O
html-to-printplug-in usa window.open; portanto, quando clico em imprimir, não leva o estilo para a nova página. - É aí que eu estou preso, porque não está assumindo o estilo de mídia, como posso substituir meu estilo na janela.open
Eu estava usando o print-nb Mas não está funcionando no navegador devido a algum motivo de segurança