Stampa di elementi con VueJS utilizzando librerie di terze parti

Sto lavorando su una tabella HTML e stampando quella tabella su una stampante usando html-to-paperin vue.js, quello che sto facendo è fare clic su aggiungi creando una nuova riga e quindi su clic su stampa Sto provando a stampare la tabella ma non ci sto prendendo tutti i dati che mostrano solo celle vuote

Codice 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");

qui il codice di lavoro in codesandbox

Si prega di controllare il codice in esecuzione

Modifica secondo la taglia

devo farlo con 'html-to-paper' il problema è che non sono in grado di dare stile ai miei elementi per la stampa usando @media print

• La risposta ux.engineerè buona ma causando problemi con il browser crome e firefox lo stanno bloccando a causa di problemi di sicurezza

Si prega di controllare sandbox del codice, ad esempio qui è il mio codice completo, sto cercando di dare stile ma non succede

• Il html-to-printplugin utilizza window.open, quindi quando faccio clic su Stampa non porta lo stile in una nuova pagina.
• È qui che sono bloccato perché non prende stile multimediale, come posso ignorare il mio stile su window.open

Stavo usando print-nb Ma non funziona sul browser per motivi di sicurezza

Sfortunatamente non è possibile sfruttare l'associazione dei dati di Vue con questo pacchetto di mixin mycurelabs / vue-html-to-paper , come indicato qui dall'autore del pacchetto .

Tuttavia, ho creato una soluzione alternativa cambiando il pacchetto utilizzato qui nella direttiva Power-kxLee / vue-print-nb .

Ecco un esempio funzionante: https://codesandbox.io/s/zen-sunset-2szqr

PS. La scelta tra pacchetti simili può essere a volte complicata. Si dovrebbero valutare le statistiche di utilizzo e attività del repository come: Usato da, Guarda e Avvia sulla prima pagina, quindi selezionare Problemi di apertura / chiusura e Richieste di pull attive / chiuse, quindi andare su Approfondimenti per controllare Pulse (1 mese), e Frequenza del codice.

Tra questi due, sceglierei vue-print-nb per essere più popolare e usato attivamente. Anche perché preferirei usare una direttiva su un mixin .

Per quanto riguarda l'altra risposta, continuare a usare vue-html-to-paper per questo scopo avrebbe bisogno di quel tipo di soluzione caotica ... Dove questa direttiva funziona immediatamente.

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

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

Come altri hanno già detto, questo non è possibile con il pacchetto utilizzato, poiché i dati associati da v-modelnon esistono durante la stampa. Quindi è necessario ottenere questi dati staticamente all'interno del tuo HTML. fonte

Una soluzione alternativa sarebbe utilizzare i segnaposto di input:

Aggiungi un riferimento alla tua tabella:

<tbody ref="tablebody">

Ciò ti consente di selezionare questo elemento nel tuo metodo. Ora cambia il metodo di stampa:

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 = "";
  }
}

Quindi forse dai uno stile ai segnaposto con CSS, perché di default sembra grigio.

Prima ho provato a ripristinare in qualche modo il valore dell'input, come input.value = input.value, ma purtroppo non ha funzionato.

Aggiornato il tuo codice qui

Come per la tua nuova ricompensa sulla domanda, per attenersi all'utilizzo vue-html-to-paper, ecco un esempio di codice aggiornato per il caricamento del foglio di stile esterno nella finestra di stampa .

Prima carica gli stili Bootstrap da una CDN esterna, quindi un file CSS locale dalla directory pubblica. Questo foglio di stile locale ha solo uno stile per usare l' !importantoverride per inserire il colore di sfondo in verde.

Chrome su Windows applica lo stile di sfondo verde agli input se viene applicata la grafica di sfondo dell'opzione di stampa . Firefox su Windows ha un pannello di opzioni di stampa diverso, che non ha tale impostazione.

Eppure entrambi applicano gli stili Bootstrap almeno in parte, quindi i fogli di stile sono caricati e in gioco.

Questo problema relativo allo stile di input di sfondo doveva dimostrare le differenze nel modo in cui i browser gestiscono gli stili di stampa ed è un argomento più ampio al di fuori dell'ambito di questa domanda.

PS. Non sono sicuro del tipo di problema di sicurezza con il vue-print-nbpacchetto, ma forse potrebbe essere risolto. Dovresti aprire un problema nel loro repository Github con un esempio minimo di riproduzione di bug.

Aggiungendo questa risposta come voce separata se vue-print-nbil problema di quella soluzione viene risolto in seguito e la mia risposta viene aggiornata.