Tôi đang làm việc trên bảng HTML và in bảng đó sang máy in bằng html-to-papervue.js, Điều tôi đang làm là nhấp vào thêm tạo một hàng mới và sau đó nhấp vào in Tôi đang cố in bảng nhưng nó không lấy bất kỳ dữ liệu nào chỉ hiển thị các ô trống
Mã ứng dụng
<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");ở đây mã làm việc trong mã và hộp
Vui lòng kiểm tra mã đang chạy
Chỉnh sửa theo tiền thưởng
tôi phải làm điều đó với 'html-to-paper', vấn đề là tôi không thể tạo kiểu cho các thành phần của mình để in bằng cách sử dụng @media print
- Câu trả lời
ux.engineerlà tốt nhưng gây ra sự cố trình duyệt crome và firefox đang chặn nó do bảo mật ngay bây giờ
Vui lòng kiểm tra mã hộp cát ví dụ ở đây là mã đầy đủ của tôi, tôi đang cố gắng tạo kiểu nhưng không xảy ra
- Các
html-to-printcông dụng cắm window.open nên khi tôi nhấp vào in nó không được lấy phong cách trang mới. - Đó là nơi tôi bị mắc kẹt như tại sao nó không lấy phong cách truyền thông, làm thế nào tôi có thể ghi đè lên phong cách của mình trên window.open
Tôi đã sử dụng print-nb Nhưng nó không hoạt động trên trình duyệt vì một số lý do bảo mật
manish thakur vui lòng kiểm tra câu trả lời mới của tôi (thời gian ân hạn kết thúc sau 4 giờ, khi đó nó sẽ bị lãng phí nếu không được trao giải)
—
ux.engineer