HTML 테이블 작업을 html-to-paper하고 vue.js에서 프린터로 테이블을 인쇄하고 있습니다. 추가 행을 추가하고 새 행을 만든 다음 인쇄를 클릭하면 테이블을 인쇄하려고하지만 테이블을 인쇄하지 않습니다. 빈 셀만 표시하는 모든 데이터
코드 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");여기 codesandbox의 작업 코드
현상금에 따라 편집
나는 'html-to-paper'와 함께해야합니다. 문제는 사용하여 인쇄하기 위해 요소에 스타일을 부여 할 수 없다는 것입니다 @media print
- 대답
ux.engineer은 괜찮지 만 브라우저 문제를 일으키는 크롬 및 파이어 폭스는 보안 문제로 인해 차단합니다.
예를 들어 코드 샌드 박스 를 확인 하십시오. 여기에는 전체 코드가 있습니다. 스타일을 지정하려고하지만 일어나지 않습니다.
html-to-print나는 그것이 새로운 페이지에 스타일을 복용하지 않는 인쇄를 클릭하고 때 플러그인 사용은 그래서는 window.open.- 그것이 미디어 스타일을 취하지 않는 이유에 갇혀있는 곳입니다. 창에서 내 스타일을 재정의하는 방법은 무엇입니까?
print-nb를 사용 하고 있었지만 보안상의 이유로 브라우저에서 작동하지 않습니다.
manish thakur 새로운 답변을 확인하시기 바랍니다 (유예 유예 기간은 4 시간 후에 종료되며, 수여되지 않을 경우 낭비됩니다)
—
ux.engineer