如何在不丢失样式的情况下打印Vue组件的一部分

Tanmay 发表于 Dev

坦美

我想从vue组件中打印一些内容。例如，从以下代码段中，我想打印v-card-text一个ID也为的元素#print：

new Vue({
  el: '#app',
  data() {
    return {
      dialog: false
    }
  },
  methods: {
    print() {
      var prtContent = document.getElementById("print");
      var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
      WinPrint.document.write(prtContent.innerHTML);
      WinPrint.document.close();
      WinPrint.focus();
      WinPrint.print();
      WinPrint.close();
    }
  }
})

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.css" />
</head>

<body>
  <div id="app">
    <v-app id="inspire">
      <v-layout row justify-center>
        <v-dialog v-model="dialog" persistent max-width="290">
          <v-btn slot="activator" color="primary" dark>Open Dialog</v-btn>
          <v-card>
            <v-card-title class="headline">Print This:</v-card-title>
            <v-card-text id="print">Lorem ipsum dolor sit amet.</v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="green darken-1" flat @click.native="print">Print</v-btn>
          </v-card>
        </v-dialog>
      </v-layout>
    </v-app>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.js"></script>
</body>

</html>

但是，当系统提示我进行打印时，与之相关的所有样式都会消失。如何以这种方式打印Vue组件，以使组件不会丢失相关的样式？我建议将代码段复制到本地计算机上以达到最佳效果。

十年月亮

您需要复制原始文档中的样式。尝试这样的事情：

// 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();

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。