How to print a part of a vue component without losing the style

前端 未结 2 458
独厮守ぢ
独厮守ぢ 2021-02-04 14:05

I want to print some content from a vue component. For example from the following snippet, I would like to print the v-card-text element which also has an id of

相关标签:
2条回答
  • 2021-02-04 15:04

    You need to copy over the styles from the original document. Try something like this:

    // Get HTML to print from element
    const prtHtml = document.getElementById('print').innerHTML;
    
    // Get all stylesheets HTML
    let stylesHtml = '';
    for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
      stylesHtml += node.outerHTML;
    }
    
    // Open the print window
    const WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
    
    WinPrint.document.write(`<!DOCTYPE html>
    <html>
      <head>
        ${stylesHtml}
      </head>
      <body>
        ${prtHtml}
      </body>
    </html>`);
    
    WinPrint.document.close();
    WinPrint.focus();
    WinPrint.print();
    WinPrint.close();
    
    0 讨论(0)
  • 2021-02-04 15:05

    Install this package vue-html-to-paper

    npm install vue-html-to-paper
    

    usage:

    import Vue from 'vue';
    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);
    
    // or, using the defaults with no stylesheet
    Vue.use(VueHtmlToPaper);
    

    component:

    <template>
      <div>
        <!-- SOURCE -->
        <div id="printMe">
          <h1>Print me!</h1>
        </div>
        <!-- OUTPUT -->
        <button @click="print"></button>
      </div>
    <template>
    
    <script>
    export default {
      data () {
        return {
          output: null
        }
      },
      methods: {
        print () {
          // Pass the element id here
          this.$htmlToPaper('printMe');
        }
      }
    }
    </script>
    

    for more detail check: https://randomcodetips.com/vue-html-to-paper/

    0 讨论(0)
提交回复
热议问题