vue打印部分页面内容

大概有三种想法：
1.使用vue-print-nb
2.在本页中只打印需要的内容
3.将需要的内容单独开个新页打印

第一种方法最好吧？不过我当时title的设置没弄清楚所以放弃了。。
安装 ↓

npm install vue-print-nb --save

在main.js文件中 ↓

import Print from "vue-print-nb";
Vue.use(Print);

剩下的步骤忘却了尼萌自己去百度吧。。。。不过设置title的部分我记得！！
在执行事件的按钮上

v-print="printData"  id="print-container"

printData中的设置

printData: {
  id: 'print-container',
  popTitle: 'title的名字啊哈哈哈哈哈'
}

差不多就可以了

第二种方法 👇
先将要打印的元素加个id或ref ↓

<el-button @click="handlePrint">打印</el-button>
<div class="content" ref="content">

</div>

唔别误会里面有东西~不过空的也成好像？这不重要哈哈哈哈哈哈哈
script标签中 ↓

methods: {
    handlePrint() {
      // 这步是将要打印的元素存进sessionStorage中
      sessionStorage.setItem("el", this.$refs.content.innerHTML);
      let url = this.$router.resolve({
        path: "/toPrint",
      })
     // 跳转新页
      window.open(url.href,'_blank')
    },
}

接着在components文件夹中新建文件 PrintPage.vue ↓

<template>
  <div class="container">
    <div id="content" v-html="content"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "",
    };
  },
  methods: {
    init() {
      // 将内容从sessionStorage中取出
      this.content = sessionStorage.getItem("el");
      // 页面渲染后执行print
      // 随后关闭页面 
      this.$nextTick(() => {
          window.print();
          window.close();
      })
    },
  },
  mounted() {
    this.init();
  },
};
</script>

记得在路由文件中添加 /toPrint
不过这种方法缺少样式，我今天的任务没有样式的需求所以先不写随后一定补！

第三种方法大概想法是：先将需要打印的内容截出来 => 将整页都装满要打印的内容 => 打印 => 将页面恢复。
爸特这个方法有个巨大的bug!!我丑话说在前哈哈哈哈哈页面看上去恢复了但实际上什么功能都不见了点击不能点击后退不能后退刷新不能刷新整个儿就是死喽哇我就不放出来害人了咳咳

tada~_{打印功能完成啦}