Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Loosing styles when printing... #21

Open
toshiye opened this issue Sep 20, 2019 · 5 comments
Open

Loosing styles when printing... #21

toshiye opened this issue Sep 20, 2019 · 5 comments
Labels
hacktoberfest Hacktoberfest 2020

Comments

@toshiye
Copy link

toshiye commented Sep 20, 2019

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
Copy link

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

@jofftiquez
Copy link
Member

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

@toshiye
Copy link
Author

toshiye commented Sep 25, 2019

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
Copy link

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
Copy link
Member

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

@jofftiquez jofftiquez added the hacktoberfest Hacktoberfest 2020 label Oct 1, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
hacktoberfest Hacktoberfest 2020
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jofftiquez @mmurangwa @toshiye @reachrahul