vue打印插件vue-print-nb的实现代码

1.引入插件npm install vue-print-nb --save

在main.js中引入

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

2.html代码

<div class="box">
    <div id="printTest" class="upTable">
      <table>
        <tr>
          <td class="title" colspan="4">木材检尺报告书</td>
        </tr>
        <tr>
          <td class="one">船名</td>
          <td style="width:190px">{{ goods.shipName }}</td>
          <td class="one">输出国</td>
          <td>{{ goods.exportCountry }}</td>
        </tr>
        <tr>
          <td class="one">树种</td>
          <td>{{ variety }}</td>
          <td class="one">委托方/货主</td>
          <td>{{ goods.goodsMaster }}</td>
        </tr>
        <tr>
          <td class="one">申报材积</td>
          <td>{{ goods.declareWoodVolume }}立方米</td>
          <td class="one">申报数量</td>
          <td>{{ goods.declareNumber }}根</td>
        </tr>
        <tr>
          <td class="one">存放地点</td>
          <td>{{ goods.goodsYard }}</td>
          <td class="one">卸毕时间</td>
          <td v-if="goods.unloadTime">{{ goods.unloadTime.substring(0,10) }}</td>
          <td v-else />
        </tr>
        <tr>
          <td class="one">检验标准</td>
          <td colspan="3">GB/T 144-2013 国家标准</td>
        </tr>
        <tr>
          <td class="title2" colspan="4">检验结果</td>
        </tr>
      </table>
      <table class="dataTable">
        <tr>
          <td style="width:210px">垛位号</td>
          <td style="width:100px">长度</td>
          <td style="width:100px">已检整木</td>
          <td style="width:100px">材积</td>
          <td style="width:100px">断木</td>
          <td style="width:0">未检整木</td>
        </tr>
        <tr v-for="(item,index) in shortData" :key="index">
          <td>{{ item.placeNumber }}</td>
          <td>{{ item.placeLength }}</td>
          <td>{{ item.zs }}</td>
          <td>{{ item.woodVolume }}</td>
          <td>{{ item.damagedWood }}</td>
          <td>{{ item.notCheckWood }}</td>
        </tr>
        <tr>
          <td style="width:210px">合计</td>
          <td style="width:100px" />
          <td style="width:100px">{{ zsAll }}</td>
          <td style="width:100px">{{ woodVolumeAll }}</td>
          <td style="width:100px">{{ damagedWoodAll }}</td>
          <td style="width:0px">{{ notCheckWoodAll }}</td>
        </tr>
      </table>
    </div>
    <el-button v-print="'#printTest'" type="primary" style="margin-top:20px">
      打印
    </el-button>
  </div>

3.js代码

<script>
export default {
  props: ['catList', 'goods'],
  data() {
    return {
    //和下边 <style media="printTest"> 一起的作用是去掉页眉页脚、去掉多出空白页的问题
      printObj: {
        id: 'printTest',
        popTitle: '',
        ectraHead: ''
      },
      shortData: [],
      variety: '',
      zsAll: 0, // 已检整木  总数
      woodVolumeAll: 0, // 材积
      damagedWoodAll: 0, // 断木
      notCheckWoodAll: 0, // 未检整木
      updateTime: ''
    }
  },
  methods: {
  //这里的数据是在父页面传来的
    getvariety(variety, catList, goods) {
      this.variety = variety
      this.shortData = catListthis.goods = goods// 合计
      let zsAll = 0
      let woodVolumeAll = 0
      let damagedWoodAll = 0
      let notCheckWoodAll = 0
      this.shortData.map((item) => {
        zsAll += item.zs
        woodVolumeAll += item.woodVolume
        damagedWoodAll += item.damagedWood
        notCheckWoodAll += item.notCheckWood
      })
      this.zsAll = zsAll
      this.woodVolumeAll = woodVolumeAll
      this.damagedWoodAll = damagedWoodAll
      this.notCheckWoodAll = notCheckWoodAll
    },
  }
}
</script>

4.样式

<style media="printTest">
@page {
    size: auto;
    margin: 3mm;
  }

  html {
    background-color: #ffffff;
    height: auto;
    margin: 0px;
  body {
    border: solid 1px #ffffff;
    margin: 10mm 15mm 10mm 15mm;
</style>
<style lang="less" scoped>
.upTable{
    width: 100%;
    height: 50%;
    margin-top: 10px;
    table{
        width: 100%;
        border-collapse:collapse
    }
    td{
        border: 1px solid #000;
        font-size: 18px;
        text-align: center;
        font-family: Source Han Sans CN;
        font-weight: 450;
        color: #000000;
    .title{
        font-size: 20px;
        height: 50px;
        font-weight: 550;
    .one{
        width: 20%;
        height: 40px;
    .title2{
        height: 45px;
    .dataTable{
        border-top: 0px solid #000000;
        td{
            //  border: 1px solid #000;
            font-size: 18px;
            text-align: center;
            font-family: Source Han Sans CN;
            font-weight: 450;
            color: #000000;
            padding: 5px 0;
        }
}
.el-button{
    margin-right: 20px;
    margin-left: 20px;
    width: 100px;
    padding: 12px 0;

到此这篇关于vue打印插件vue-print-nb的实现的文章就介绍到这了,更多相关vue打印插件vue-print-nb内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解如何在vue项目中使用lodop打印插件

    项目中使用到打印的功能.领导推荐使用Lodop Lodop是什么东东,反正就是可以定制打印的插件... 既然是插件,vue的渐进式开发.完全可以拿来化为己用. 如何使用那?先大概看了下开发文档,就是一堆demo,一个js文件,三个安装程序,我擦,这么简单.come on 电脑安装C-Lodop,就可以打印预览来了. 开工,翻来覆去就一个LodopFuncs.js是干货,扔到项目中.就差怎么调里面的方法了. 如何引用,当然得改造喽 LodopFuncs.js 方法改造如下 //====判断是否需要

  • vue打印插件vue-print-nb的实现代码

    1.引入插件npm install vue-print-nb --save 在main.js中引入 import Print from 'vue-print-nb'Vue.use(Print) 2.html代码 <div class="box"> <div id="printTest" class="upTable"> <table> <tr> <td class="title&qu

  • vue打印功能实现的两种方法总结

    第一种方法:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入 安装好以后在main.js文件中引入 import Print from 'vue-print-nb' Vue.use(Print); //注册 3,现在就可以使用了 <div id="printTest" > <p>明月照于山间</p> <p>清风来于江上 </p> </div> <butt

  • vue购物车插件编写代码

    本文实例为大家分享了vue购物车插件的具体代码,供大家参考,具体内容如下 先上效果图 下面相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-sca

  • 自带气泡提示的vue校验插件(vue-verify-pop)

    本教程大家分享了自带气泡提示的vue校验插件,供大家参考,具体内容如下 安装 npm install vue-verify-pop 使用 VUE版本:1.x 必须在vue-cli生成的webpack模板环境中使用 一.在./main.js中执行全局配置 import vue from 'vue' import verify from 'vue-verify-pop' vue.use(verify) // 以下配置非必须,按你的需求来 // 配置默认校验不通过时的提示信息 verify.errMs

  • vue弹窗插件实战代码

    vue做移动端经常碰到弹窗的需求, 这里写一个功能简单的vue弹窗 popup.vue <template> <div class="popup-wrapper" v-show="visible" @click="hide"> <div class="popup-text">{{text}}</div> </div> </template> 组件html结

  • vue路由插件之vue-route

    vue路由插件,vuer Router,使vue官方的路由管理其,和vue高度耦合 1.vue-Router的使用 import Vue from 'vue' import Router from 'vue-router' //引入路由组件 Vue.use(Router) new Router({ mode: 'history', //路由的两种模式 hash 和history 默认使history模式 routes: [ { path: '/', name: 'home', component

  • Vue分页插件的前后端配置与使用

    本文实例为大家分享了Vue分页插件的前后端配置与使用,供大家参考,具体内容如下 分页插件的配置 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.10</version> </dependency> <dependency> <groupI

  • vue滚动插件better-scroll使用详解

    本文实例为大家分享了vue滚动插件better-scroll的具体代码,供大家参考,具体内容如下 1. 概述 1.1 说明 better-scroll是一款重点解决移动端(已支持PC)各种滚动场景需求的插件.例如淘宝聚划算中的类型选择(女装/家纺/生鲜美食等),没有滚动条显示却实现了滚动功能. 1.2 better-scroll安装 npm install better-scroll --save 安装至项目中 1.3 better-scroll使用 better-scroll常见应用场景(列表

  • 一起写一个即插即用的Vue Loading插件实现

    无论最终要实现怎样的网站,Loading状态都是必不可少的一环,给用户一个过渡喘息的机会也给服务器一个递达响应的时间. 从使用方式说起 不管从0开始写起还是直接下载的Loading插件,都会抽象为一个组件,在用到的时候进行加载Loading,或者通过API手动进行show或者hide <wait> </wait> ... this.$wait.show() await fetch('http://example.org') this.$wait.hide() 或者通过Loading

  • vue分页插件的使用方法

    本文实例为大家分享了vue分页插件的具体代码,供大家参考,具体内容如下 分页插件代码: <div> <div class="page"> <div class="pagelist"> <span class="jump" :class="{disabled:pstart}" @click="lessPage()">上一页</span> <sp

随机推荐