मैं HTML तालिका पर काम कर रहा हूं और html-to-papervue.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");यहाँ codeandbox में काम कर कोड
इनाम के अनुसार संपादित करें
मुझे इसे 'html-to-paper' के साथ करना है। मुद्दा यह है कि मैं मुद्रण के लिए अपने तत्वों को शैली देने में सक्षम नहीं हूं @media print
- द्वारा जवाब
ux.engineerठीक है, लेकिन ब्राउज़र इश्यू क्रोम और फ़ायरफ़ॉक्स के कारण सुरक्षा isssue के कारण इसे रोक रहे हैं
कृपया कोड सैंडबॉक्स चेक करें उदाहरण के लिए यहां मेरा पूरा कोड है, मैं स्टाइल देने की कोशिश कर रहा हूं लेकिन ऐसा नहीं हो रहा है
html-to-printप्लगइन का उपयोग करता है तो विंडो.ओपन जब मैं प्रिंट पर क्लिक कर रहा हूँ यह नए पेज पर शैली नहीं ले रही है।- यही कारण है कि जहां मैं अटक रहा हूं कि यह मीडिया शैली क्यों नहीं ले रहा है, मैं खिड़की पर अपनी शैली को कैसे ओवरराइड कर सकता हूं
मैं प्रिंट-एनबी का उपयोग कर रहा था लेकिन यह कुछ सुरक्षा कारणों के कारण ब्राउज़र पर काम नहीं कर रहा है
मनीष ठाकुर कृपया मेरा नया उत्तर देखें (बाउंटी ग्रेस पीरियड 4 घंटे में समाप्त हो जाता है, जिस पर यदि उसे पुरस्कार नहीं दिया गया तो वह बेकार हो जाएगा)
—
ux.engineer