如何在不丢失样式的情况下打印 vue 组件的一部分 [英] How to print a part of a vue component without losing the style

查看：32 发布时间：2021/9/20 19:09:56 javascript vue.js printing

本文介绍了如何在不丢失样式的情况下打印 vue 组件的一部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

new Vue({el: '#app',数据() {返回 {对话:假}},方法: {打印() {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();}}})

<头><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.css"/><身体><div id="应用程序"><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>打开对话框</v-btn><v-card><v-card-title class="headline">打印:</v-card-title><v-card-text id="print">Lorem ipsum dolor sat amet.</v-card-text><v-card-actions><v-间隔></v-间隔><v-btn color="green darken-1" flat @click.native="print">打印</v-btn></v-card></v-对话框></v-layout></v-app>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.js"></script></html>

但是，当我收到打印提示时，所有与之相关的样式都消失了.如何以这种方式打印 vue 组件，以便组件不会丢失关联的样式?我建议将代码片段复制到您的本地机器以获得最佳效果.

解决方案

您需要从原始文档中复制样式.尝试这样的事情:

//获取要从元素打印的 HTMLconst prtHtml = document.getElementById('print').innerHTML;//获取所有样式表 HTML让stylesHtml = '';for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {styleHtml += node.outerHTML;}//打开打印窗口const WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');WinPrint.document.write(`<!DOCTYPE html><头>${stylesHtml}<身体>${prtHtml}`);WinPrint.document.close();WinPrint.focus();WinPrint.print();WinPrint.close();

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 #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/vue@2.5.17/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.js"></script>
</body>

</html>

However,when I get prompted for the print, all the styles associated with it goes away. How can I print a vue component in such a way so that the components won't lose the associated styles? I recommend to copy the snippet to your local machine for the best effect.

解决方案

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

这篇关于如何在不丢失样式的情况下打印 vue 组件的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何在不丢失样式的情况下打印 vue 组件的一部分 [英] How to print a part of a vue component without losing the style

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何在不丢失样式的情况下打印 vue 组件的一部分 [英] How to print a part of a vue component without losing the style

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭