3. parti kitaplıkları kullanarak VueJS ile öğeleri yazdırma

HTML tablo üzerinde çalışıyorum ve html-to-papervue.js kullanarak yazıcıya bu tablo yazdırıyorum, Yaptığım şey yeni bir satır oluşturma eklemek tıklayın ve daha sonra baskı tıklayın ben masaya yazdırmaya çalışıyorum ama almıyor yalnızca boş hücreleri gösteren veriler

Kod Uygulama.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");

Burada codeandbox'taki çalışma kodu

Lütfen çalışan kodu kontrol edin

Ödül başına düzenleme

'html-to-paper' ile yapmak zorundayım sorunu kullanarak baskı için benim öğeleri stil veremiyorum @media print

• Tarafından cevap ux.engineeriyi ama tarayıcı sorunu crome ve firefox neden güvenlik sorunu nedeniyle engelliyor

Lütfen kod sandbox kontrol edin örneğin burada benim tam kod, ben stil vermek için çalışıyorum ama değil

• html-to-printBen yeni sayfaya stil almıyor baskı tıklayarak am zaman eklentisi kullanır böylece window.open.
• Medya tarzı almadığı için sıkıştığım yer, penceremdeki stilimi nasıl geçersiz kılabilirim.

Print-nb kullanıyordum ama bazı güvenlik nedenlerinden dolayı tarayıcıda çalışmıyor

Ne yazık ki bu konuda bağlayıcı Vue 'verilerini kaldıraç olamaz mycurelabs / vue-html ila kağıt mixin paketinde , paket yazar tarafından burada belirtildiği gibi .

Ancak, burada kullanılan paketi Power-kxLee / vue-print-nb yönergesine geçirerek geçici bir çözüm oluşturdum .

İşte çalışan bir örnek: https://codesandbox.io/s/zen-sunset-2szqr

PS. Benzer paketler arasında seçim yapmak bazen zor olabilir. Repo'nun kullanım ve etkinlik istatistiklerini şu şekilde değerlendirmelisiniz: Ön sayfada kullanılan, İzle ve Başlatma, ardından Açık / Kapalı sorunları ve Etkin / Kapalı Çekme İsteklerini kontrol edin ve ardından Nabzı (1 ay) kontrol etmek için Analizler'e gidin ve Kod Frekansı.

Bu ikisi arasında, daha popüler ve aktif olarak kullanılmaları için vue-print-nb'yi seçerdim . Ayrıca bir mixin yerine bir direktif kullanmayı tercih ediyorum .

Diğer cevaplara gelince, bu amaçla vue-html-to-paper kullanmaya devam etmek için bu tür çılgın bir çözüm gerekiyordu ... Bu direktifin kullanıma hazır olduğu yerde.

https://github.com/mycurelabs/vue-html-to-paper

https://github.com/Power-kxLee/vue-print-nb

Diğerlerinin de belirttiği gibi, kullandığınız paketle bu mümkün değildir, çünkü v-modelyazdırma sırasında bağlı veriler mevcut değildir. Bu nedenle bu verileri statik olarak html'niz içine almanız gerekir. Kaynak

Geçici çözüm girdi yer tutucularını kullanmak olacaktır:

Tablonuza bir referans ekleyin :

<tbody ref="tablebody">

Bu, yönteminizde bu öğeyi seçmenizi sağlar. Şimdi yazdırma yöntemini değiştirin:

print() {
  const inputs = this.$refs.tablebody.getElementsByTagName("input");
  for (let input of inputs) {
    input.placeholder = input.value;
  }
  this.$htmlToPaper("printMe");
  for (let input of inputs) {
    input.placeholder = "";
  }
}

Sonra varsayılan olarak gri görünüyor çünkü yer tutucuları css ile stil.

İlk olarak bir şekilde girişin değerini sıfırlamaya çalıştım input.value = input.value, ama maalesef bu işe yaramadı.

Kodunuzu burada güncelleyin

Sorudaki yeni ödülünüze göre, kullanmaya devam etmek için vue-html-to-paper, harici pencere stil sayfasını yazdırma penceresine yüklemek için güncellenmiş bir kod örneği .

Önce Bootstrap stillerini harici bir CDN'den, ardından genel dizinden bir yerel CSS dosyası yükler. Bu yerel stil sayfasında, !importantgiriş arka plan renginin yeşile geçersiz kılınması için yalnızca bir stil bulunur .

Windows'ta Chrome, yazdırma seçeneği arka plan grafikleri uygulanırsa girişlere yeşil arka plan stilini uygular . Windows'taki Firefox'ta böyle bir ayar bulunmayan farklı bir yazdırma seçenekleri paneli vardır.

Yine de her ikisi de en azından kısmen Bootstrap stilleri uyguluyor, bu yüzden stil sayfaları yüklü ve oyunda.

Bu giriş arka plan stili sorunu, tarayıcıların yazdırma stillerini nasıl ele aldıkları konusunda farklılıklar göstermekti ve bu sorunun kapsamı dışında daha geniş bir konu.

PS. vue-print-nbPaketi ile ne tür bir güvenlik sorunu vardı emin değilim ama belki çözülebilir. Github deposunda bir sorunu en az hata üretme örneğiyle açmalısınız.

Bu sorunun vue-print-nbsorunu daha sonra çözülürse ve cevabım güncellenirse bu yanıtı ayrı bir giriş olarak eklemek .