脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-print-nb实现页面打印

vue中的vue-print-nb如何实现页面打印

 更新时间：2022年04月21日 10:45:06   作者：今天代码敲了吗  
这篇文章主要介绍了vue中的vue-print-nb如何实现页面打印，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

安装

npm install vue-print-nb --save

在main.js中全局引入

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

页面中使用

备注：只会打印id=printMe内的网页

<template>
  <div class="table">
    <div class="tableList">
      <div id="printMe">
        <div class="title">打印模板</div>
        <div class="content-table-three">
          <div class="table-name-three">XXXX</div>
          <div class="table-info-three">{{ list.fromName }}</div>
          <div class="table-name-three">XXXX</div>
          <div class="table-info-three">{{ list.fromIdCard }}</div>
          <div class="table-name-three">XXXX</div>
          <div class="table-info-three">{{ list.fromPhone }}</div>
        </div>
        <div class="content-table-three">
          <div class="table-name-three">XXXX</div>
          <div class="table-info-three">{{ list.fromName }}</div>
          <div class="table-name-three"XXXX</div>
          <div class="table-info-three">{{ list.fromIdCard }}</div>
          <div class="table-name-three">XXXX</div>
          <div class="table-info-three">{{ list.fromPhone }}</div>
        </div>
        <div class="content-table-two">
          <div class="table-name-two">XXXX</div>
          <div class="table-info-two">{{ list.reason }}</div>
          <div class="table-name-two">XXXX</div>
          <div class="table-info-two">{{ list.reason }}</div>
        </div>
        <div class="content-table-one">
          <div class="table-name-one">XXXX</div>
          <div class="table-info-one">{{ list.reason }}</div>
        </div>
        <div class="content-table-one">
          <div class="table-name-one">XXXX</div>
          <div class="table-info-one">{{ list.reason }}</div>
        </div>
        <div class="content-table-img">
          <div class="table-name-one">XXXX</div>
          <div class="table-info-img">
            <div class="imgsrc">
              <img
                v-if="list.img"
                :src="list.img"
              />
            </div>
          </div>
        </div>
        <div class="content-table-img">
          <div class="table-name-one">XXXX</div>
          <div class="table-info-img">
            <div class="imgsrc">
              <img
                v-if="list.img"
                :src="list.img"
              />
            </div>
          </div>
        </div>
      </div>
      <div  class="table-btn">
        <Button type="info" v-print="printObj" class="btn-no">打印</Button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "printInfo",
  data() {
    return {
      list:[],
      printObj: {
        id: "printMe",
        popTitle: "打印模板",
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
      },
    };
  },
  methods: {},
  computed: {},
  created() { },
};
</script>
<style   scoped>
.table {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
}
.tableList {
  width: 900px;
  margin: auto;
  margin-top: 20px;
}
.title {
  font-size: 20px;
  width: 100%;
  text-align: center;
}
.table-name-three,
.table-info-three {
  border: 0.55px solid;
  width: 16.7%;
}
.table-name-two,
.table-info-two {
  border: 0.55px solid;
  width: 25%;
  line-height: 100px;
  text-align: center;
}
.table-info-img {
  border: 0.55px solid;
  width: 75%;
}
.table-info-one {
  border: 0.55px solid;
  width: 75%;
}
.table-name-one {
  border: 0.55px solid;
  width: 25%;
}
.content-table-one,
.content-table-two,
.content-table-three {
  display: flex;
  height: 100px;
  width: 100%;
  line-height: 100px;
  text-align: center;
}
.content-table-img {
  display: flex;
  height: 100px;
  width: 100%;
  line-height: 100px;
  text-align: center;
}
img {
  max-width: 100%;
  height: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
}
.imgsrc {
  width: 90%;
  margin: auto;
  height: 90%;
  margin-top: 5px;
}
.table-btn {
  margin-top: 20px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;
}
</style>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • elementui el-calendar日历组件使用示例

    elementui el-calendar日历组件使用示例

    这篇文章主要为大家介绍了elementui el-calendar日历组件使用示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • el-table嵌套el-popover处理卡顿的解决

    el-table嵌套el-popover处理卡顿的解决

    本文主要介绍了el-table嵌套el-popover处理卡顿的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • vue-cli3+ts+webpack实现多入口多出口功能

    vue-cli3+ts+webpack实现多入口多出口功能

    这篇文章主要介绍了vue-cli3+ts+webpack实现多入口多出口功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • ant-design-vue中设置Table每页显示的条目数量方式

    ant-design-vue中设置Table每页显示的条目数量方式

    这篇文章主要介绍了ant-design-vue中设置Table每页显示的条目数量方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • vue实现按钮文字动态改变

    vue实现按钮文字动态改变

    这篇文章主要介绍了vue实现按钮文字动态改变方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue和element上传图片以及进行拖拽图片排序问题

    vue和element上传图片以及进行拖拽图片排序问题

    这篇文章主要介绍了vue和element上传图片以及进行拖拽图片排序问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Vue中$attrs与$listeners的使用教程

    Vue中$attrs与$listeners的使用教程

    这篇文章主要介绍了Vue中$attrs与$listeners的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • vue 使用monaco实现代码高亮

    vue 使用monaco实现代码高亮

    这篇文章主要介绍了vue 使用monaco实现代码高亮的方法，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
    2021-03-03
  • vue项目接口域名动态获取操作

    vue项目接口域名动态获取操作

    这篇文章主要介绍了vue项目接口域名动态获取操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue3清空reactive的四种方式

    vue3清空reactive的四种方式

    本文主要介绍了vue3清空reactive的四种方式,包含使用 Object.assign,使用 Object.keys 和 for...in 循环,使用 delete 操作符和重新赋值4种,感兴趣的可以了解一下
    2024-03-03

最新评论