vue html to paper print data without HTML and CSS in nuxtjs

[betsaleel777]

hi , guys , it is very difficult for me make config for custom local css style in my nuxtjs project.

   //plugin file
   import Vue from 'vue'
   import VueHtmlToPaper from 'vue-html-to-paper'
   const options = {
       name: '_blank',
       specs: ['fullscreen=yes', 'titlebar=yes', 'scrollbars=yes'],
       styles: ['../assets/print.css']
    }
    Vue.use(VueHtmlToPaper, options)

//component
<template>
  <b-container>
    <b-table
      id="tableau"
      :fields="fields"
      :items="items"
      hover
      show-empty
      bordered
    ></b-table>
    <center>
      <b-button @click="printSection" variant="primary">Imprimer</b-button>
    </center>
  </b-container>
</template>

<script>
export default {
  name: 'Listing',
  data() {
    return {
      fields: [
        { key: 'libelle', label: 'Libellé' },
        { key: 'prix_achat', label: "Prix d'achat" },
        { key: 'prix_vente', label: 'Prix de Vente' }
      ],
      items: []
    }
  },
  async fetch() {
    const { produits } = await this.$axios.$get('/api/produits')
    this.items = produits.map((produit) => {
      return {
        id: produit.id,
        libelle: produit.libelle,
        prix_achat: produit.prix_achat,
        prix_vente: produit.prix_vente
      }
    })
  },
  methods: {
    printSection() {
      this.$htmlToPaper('tableau')
    }
  }
}
</script>
<style scoped></style>

//css code 
@media print {
  *{color:rgb(77, 65, 245)}
}

the page to print look like this using bootstrap-vue as a module but result in the window print only the data in plain text , no html and no css applied i don't understand it

please help me
regards ...

[betsaleel777]

issue fixed !!!!! do not put the id property in b-table tag directly , put it in parent div , and it will work fine do not do this

  <b-container>
    <b-table
      id="tableau"
      :fields="fields"
      :items="items"
      hover
      show-empty
      bordered
    ></b-table>
    <center>
      <b-button @click="printSection" variant="primary">Imprimer</b-button>
    </center>
  </b-container>
</template>

but use it

<template>
  <b-container>
   <div id="tableau">
    <b-table
      :fields="fields"
      :items="items"
      hover
      show-empty
      bordered
    ></b-table>
   </div>
    <center>
      <b-button @click="printSection" variant="primary">Imprimer</b-button>
    </center>
  </b-container>
</template>