can't print in landscape

[lionelripoll]

As the title say, the landscape mode doesn't work:

using : Version 86.0.4240.80 (Build officiel) (x86_64)

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

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',
    'https://unpkg.com/kidlat-css/css/kidlat.css'
  ]
}

Vue.use(VueHtmlToPaper, options);

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
...

app.vue

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.views-padding{
  margin : 70px 20px;
}

@media print {
  @page {
    size: landscape
  }
}

</style>

component:

<template>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12" id="to-print">

      <h2 class="text-left">{{ title }}</h2>
.....
  methods: {

    print () {
      // Pass the element id here
      this.$htmlToPaper('to-print');
    },
.......

what did I do wrong ?

[kim00425]

make css file in static folder or public folder(find your favicon.ico file. 90% case there is correct folder). and you should set your styles option.

this.$htmlToPaper('to-print', {styles:["/custom.css']})

[jofftiquez]

Closing for now, please refer to @kim00425's comment. Thanks.