toshiye commented 5 years ago

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 commented 5 years ago

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

jofftiquez commented 5 years ago

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

toshiye commented 5 years ago

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 commented 4 years ago

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 <!doctype html> 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 commented 4 years ago

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

mycurelabs / vue-html-to-paper

Loosing styles when printing... #21

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