Loosing styles when printing...

[toshiye]

Hi all,

Thanks for this amazing plugin, is great...

I'm very new in programming, even more in Vue, i'm developing one application using Laravel, VueJS with BootStrapVue and your plugin, when i print one b-table, i lost all the styles of that table (borders, colors, etc)... Is that a way for me to work around this?

Thanks again for the app.

[reachrahul]

I was not able to recreate the issue, can you help me to recreate it?

[jofftiquez]

Thank you @toshiye can you show us your code? Based on your description, I think you forgot to setup the css options.

[toshiye]

Hi all, thanks for replying and sorry for the delay, let me try to explain:

This is the div that i want to print in vue:

`

{{ maquinaRel.maquina }} de {{ maquinaRel.dataInicial }} a {{ maquinaRel.dataFinal }}

        <b-table bordered hover striped :items="filtered" :fields="fields" small
        >
            <td v-for="field in fields" :key="field.key">
                <input v-model="filters[field.key]" :placeholder="field.label">
            </td>
        </b-table>

        <br>
        
        <b-table bordered hover striped :items="metricasFiltradas" :fields="metricas" small
        >
            <td v-for="metrica in metricas" :key="metrica.key">
                <input v-model="filtrosMetricas[metrica.key]" :placeholder="metricas.label">
            </td>
        </b-table>
    </div>`

This is my printing button:

<b-button @click="printMAchines" v-if="selected === '0'">Imprimir</b-button>

This is my method:

printMAchines(){ this.$htmlToPaper('maquinasTable') }

As you can see, my table is bordered and striped but when i click on the print button, the page opens, looses all of these configurations. Honestly, i'm sure that is a way to do so but i don't know or don't understand how to do so.

Any help will be great.

Thanks again for a great job and for this great plugin.

[mmurangwa]

Good Day,

Thank you very much for the great plugin, I am also having the same issue where I am loosing styles when printing. I have noticed that user agent stylesheet overrides my css.

One way of fixing this is to add the tag to the print file this will ensure that the user agent stylesheet does not override the css.

May you please advise how I can add this tag.

[jofftiquez]

Hello may I see your styles? According to the documentation, you should wrap the styles inside @media print {} block.