Printing elements with VueJS using 3rd party libraries

Question

I am working on HTML table and and printing that table to printer using html-to-paper in vue.js,What I am doing is on click of add creating a new row and then on click of print I am trying to print the table but it is not taking any data only showing empty cells

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

here the working code in codesandbox

Please check running code

Edit as per bounty

i have to do it with 'html-to-paper' the issue is I am not able to give style to my elements for printing using @media print

• The answer by ux.engineer is fine but causing browser issue crome and firefox are blocking it due to security isssue

Please check code sandbox for example here is my full code, i am trying to give styling but not happening

• The html-to-print plugin uses window.open so when I am clicking on print it is not taking the the style to new page.
• That is where I am stuck as why it is not taking media style, how can I override my style on window.open

I was Using print-nb But it is not working on browser due to some security reason

Answer 1

Unfortunately you cannot leverage Vue's data binding with this mycurelabs/vue-html-to-paper mixin package, as stated here by the package author.

However, I've created a workaround for by switching the package used here to Power-kxLee/vue-print-nb directive.

Here's a working example: https://codesandbox.io/s/kind-hypatia-inutd

PS. Choosing between similar packages may be tricky at times. One should evaluate the repo's usage and activity stats like: Used by, Watch, and Start on the front page, then check Open / Closed issues and Active / Closed Pull Requests, and then go to Insights to check Pulse (1 month), and Code Frequency.

Between these two, I would choose vue-print-nb for being more popular and actively used. Also because I'd prefer using a directive over a mixin.

As far as the other answer goes, keeping to use vue-html-to-paper for this purpose would need that kind of a hacky solution... Where as this directive works out-of-the-box.

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

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

Answer 2

As others have mentioned, this is not possible with the package you use, because the bound data from v-model doesn't exist when printing. So you need to get this data statically inside your html. Source

A Workaround would be to use input placeholders:

Add a reference to your table:

<tbody ref="tablebody">

This allows you to select this element in your method. Now change the print method:

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

Then maybe style the placeholders with css, because it looks grey by default.

I first tried to somehow reset the value of the input, like input.value = input.value, but unfortunately that didn't work.

Updated your code here

Answer 3

As per your new bounty on the question, for sticking to using vue-html-to-paper, here is an updated code example for loading externals stylesheet to the print window.

It first loads Bootstrap styles from an external CDN, then a local CSS file from the public directory. This local stylesheet has only one style for using !important override for input background color to green.

Chrome on Windows applies that green background style to inputs if print option background graphics is applied. Firefox on Windows has a different print options panel, which doesn't have such a setting.

Yet both are applying Bootstrap styles at least partly, so the stylesheets are loaded and in play.

This input background style issue was to demonstrate differences in how browsers handle print styles, and it's a wider topic outside the scope of this question.

PS. I'm not sure what kind of security issue there was with vue-print-nb package but perhaps it could be solved. You should open an issue in their Github repo with a minimal bug reproduction example.

Adding this answer as a separate entry if that vue-print-nb solution's issue gets solved later and my answer be updated.