আমি এইচটিএমএল টেবিলের উপর কাজ করছি 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");কোডস্যান্ডবক্সে এখানে ওয়ার্কিং কোড রয়েছে
অনুগ্রহ অনুসারে সম্পাদনা করুন
আমি এটি 'এইচটিএমএল-টু পেপার' দিয়ে করতে হবে সমস্যাটি হ'ল আমি মুদ্রণের জন্য আমার উপাদানগুলিকে স্টাইল দিতে সক্ষম নই @media print
- উত্তরটি
ux.engineerউত্তম তবে ব্রাউজারের সমস্যার ক্রোম সৃষ্টি করছে এবং সুরক্ষা বিচ্ছিন্ন হওয়ার কারণে ফায়ারফক্স এটিকে অবরুদ্ধ করছে
দয়া করে কোড স্যান্ডবক্স চেক করুন উদাহরণস্বরূপ এখানে আমার সম্পূর্ণ কোড, আমি স্টাইলিং দেওয়ার চেষ্টা করছি তবে ঘটছে না
html-to-printপ্লাগ ইন ব্যবহার করে, তাই window.open যখন আমি মুদ্রণ এ ক্লিক করছি এটা নতুন পৃষ্ঠায় শৈলী গ্রহণ করা হয় না।- আমি যেখানে আটকে থাকি কেন এটি মিডিয়া স্টাইল গ্রহণ করছে না, আমি কীভাবে উইন্ডো.ওপেনে আমার স্টাইলটিকে ওভাররাইড করতে পারি
আমি মুদ্রণ-এনবি ব্যবহার করছিলাম তবে এটি কোনও সুরক্ষার কারণে ব্রাউজারে কাজ করছে না
মনীষ ঠাকুর দয়া করে আমার নতুন উত্তরটি দেখুন (অনুগ্রহপূর্বক চার
—
মাসের