CODEWITHSUNDEEP
javascriptcssvue.jsprintingvuejs2
manish thakur
manish thakur

Reputation: 820

Printing elements with VueJS using 3rd party libraries

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

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

I was Using print-nb But it is not working on browser due to some security reason this is what is says while using print-nb

Upvotes: 13

Views: 11354

Answers (3)

arkuuu
arkuuu

Reputation: 648

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

Upvotes: 6

ux.engineer
ux.engineer

Reputation: 11368

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

Upvotes: 11

ux.engineer
ux.engineer

Reputation: 11368

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.

Upvotes: 0

Related Questions