Блог

Перед началом я уже пытался найти решение, но все варианты, которые я нашел, я не смог применить в проекте VUE, и поэтому я создаю этот «вопрос».

Я пытаюсь использовать vue-html-на-бумаге для печати таблицы в формате PDF (альбомная).

В данный момент я сталкиваюсь с проблемой, связанной с этим ландшафтом, потому что я не могу распечатать документ с этим свойством.

Когда я пробую Firefox, доступна опция ландшафтного отображения:

Но когда я пробую Chrome/Edge/brave, эта опция не разрешена.

Основное преимущество использования vue-html-на-бумаге заключается в том, чтобы печатать всегда в альбомной ориентации.

В моем проекте vue у меня есть следующая структура:

main.js

 import VueHtmlToPaper from "vue-html-to-paper";
const options = {
  name: "_blank",
  specs: ["fullscreen=yes", "titlebar=yes", "scrollbars=yes"],
  styles: [
    'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
    "@/style.css"
    
    // "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css",
    // "https://unpkg.com/kidlat-css/css/kidlat.css"

    // "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css",
    // "https://unpkg.com/kidlat-css/css/kidlat.css",
    // "public/landscape.css"
  ]

  , "windowTitle": "Windows title test."

};


Vue.use(VueHtmlToPaper, options);


 

view:

 <template>    
    <div>
        <div id="printMe">
                
            <b-table striped hover :items="rows"></b-table>
            
        </div>
    
        <button @click="printPDF"><i class="fas fa-user" />Click Me!</button>
    </div>
</template>

<script>
    import { firebasedatabase } from '../firebaseDb'

    // import VueHtmlToPaper from 'vue-html-to-paper'

    export default {
        data() {
            return{
                socios : []

                , cotasAbertas : []

                , lists : [{}]
                , output: null


               , columns: [
            
               , rows : []

                , options : {
                    name : '_blank'
                    , specs:[
                        'fullscreen=yes',
                        'titlebar=yes',
                        'scrollbars=yes'
                    ]

                }
                




            }
        },


        methods : {

            , async printPDF(){
                // this.$htmlToPaper("printMe" , {size: landscape })
                // this.$htmlToPaper("printMe", null, () =>{
                //     console.log('Print Landscape - log')
                // } );


                    const localOptions = {
                    styles: [
                    'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
                    'https://unpkg.com/kidlat-css/css/kidlat.css',
                    './landscape.css'
                    ]
                };


               await  this.$htmlToPaper("printMe", localOptions)
            }

        },

        components : {
            //  VueHtmlToPaper
        },

        created() {
            
            this.getAllCotas();
            this.getSociosToPrint();
            

        }





    }
</script>

<style lang="scss" scoped>
@media print {
    @page {
        size: landscape;
    }
}
</style>

 

Есть идеи/предложения ?