【Vue】单据打印功能

一、打印组件

需要选定区域进行打印，使用vue-print组件

组件安装

npm install vue-print-nb --save

在项目的Main.js中引入（全局注册）：

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

组件使用

1、对要打印的区域套一个div，设置id属性

<div id="printView">
    这是要打印的区域代码....
<div/>

2、放置打印触发按钮，该组件已经装填了自定义指令（v-print），传入字符填写id选择器

<div class="drawer-bottom-bar">
  <el-button v-print="'#printView'" type="primary">打印</el-button>
  <el-button @click="$parent.$parent.closePrintDialog()">取消</el-button>
</div>

二、打印预览

element-ui 表格组件在打印时会样式崩塌，这个问题没法解决，直接弃用组件

实际上的需求是打印单据，用最简单的table组件实现即可

字体的样式：

font-size: 12px; /* 字体大小 */
font-family: SimSun; /* 字体样式 */

表格的标签属性和样式：

属性

<table border="1pm" cellspacing="0" align="center" width="100%">
    表格内容...
<table/>

样式

/* 表格边框线折叠 */
border-collapse: collapse;

/* 单元格布局 */
table-layout:fixed;
word-wrap:break-word;
word-break:break-all;

三、完整代码：

<template>
  <div v-loading="loading" style="padding: 10px;">
    <div id="printView" style="padding-left: 90px; padding-right: 20px;">
      <h2 style="text-align: center;margin: 30px 0 10px 0;font-family: SimSun;">用款申请单</h2>
      <table class="table" border="0pm" cellspacing="0" align="left" width="100%" style="font-size: 12px;font-family: SimSun;margin-bottom: 10px; table-layout:fixed;word-wrap:break-word;word-break:break-all">
        <tr>
          <td style="padding:5px;" align="left"> </td>
          <td style="padding:5px;" align="left"> </td>
          <td style="padding:5px;" align="left"> </td>
          <td style="padding:5px; font-weight: bolder; font-size: 15px;" align="right">{{ form.fullCoName }}</td>
        </tr>
        <tr>
          <td style="padding:5px;" align="left"> </td>
          <td style="padding:5px;" align="left"> </td>
          <td style="padding:5px;" align="left"> </td>
          <td style="padding:5px; font-weight: bolder; font-size: 15px;" align="right">单据编号：{{ form.apCode }}</td>
        </tr>
        <tr>
          <td style="padding:5px;" align="left">申请部门：{{ form.deName }}</td>
          <td style="padding:5px;" align="left">申请日期：{{ form.apDate }}</td>
          <td style="padding:5px;" align="left">报销人：{{ form.apProposerName }}</td>
          <td style="padding:5px;" align="left">制单人：{{ form.creatorName }}</td>
        </tr>
        <tr style="margin:0;padding:0;">
          <td style="padding:5px;" align="left">往来对象类型：{{ form.apRoTypeName }}</td>
          <td style="padding:5px;" align="left">往来对象：{{ form.apReObjName }}</td>
          <td style="padding:5px;" align="left">付款结算方式：{{ form.apSettMethName }}</td>
          <td style="padding:5px;" align="left">合计金额：{{ form.apToAmount }}</td>
        </tr>
        <tr style="margin:0;padding:0;">
          <td style="padding:5px;" align="left">收款人：{{ form.apRePayee }}</td>
          <td style="padding:5px;" align="left">收款账号：{{ form.apReAccount }}</td>
          <td style="padding:5px;" align="left">收款银行：{{ form.apReBank }}</td>
          <td style="padding:5px;" align="left">收款支行：{{ form.apReSubbranch }}</td>
        </tr>
        <tr style="margin:0;padding:0;">
          <td style="padding:5px;" align="left">开户行所在地：{{ form.apReBaLocus }}</td>
          <td style="padding:5px;" align="left">付款备注：{{ form.apPaRemark }}</td>
          <td />
          <td />
        </tr>
      </table>

      <div style="font-size: 12px;font-family: SimSun;font-weight: bold;margin: 0 0 10px 5px;">用款明细</div>
      <table class="yk-table" border="1pm" cellspacing="0" align="center" width="100%" style="font-size: 12px;font-family: SimSun; table-layout:fixed;word-wrap:break-word;word-break:break-all">
        <tr>
          <th width="55px">序号</th>
          <th>摘要</th>
          <th>归属项目</th>
          <th>金额（元）</th>
          <th>费用类别</th>
        </tr>
        <tr v-for="(item, index) in form.detailList" :key="index" align="center">
          <td>{{ index + 1 }}</td>
          <td>{{ item.adSummary }}</td>
          <td>{{ item.inName }}</td>
          <td>{{ item.adAmount }}</td>
          <td>{{ item.exName }}</td>
        </tr>
        <tr align="center">
          <td>合计</td>
          <td colspan="2">{{ adAmountUpper }}</td>
          <td>{{ adAmount }}</td>
          <td />
        </tr>
      </table>
    </div>

    <div class="drawer-bottom-bar">
      <el-button v-print="'#printView'" type="primary">打印</el-button>
      <el-button @click="$parent.$parent.closePrintDialog()">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getFinSpApplyById } from '@/api/financial/spend/spapply'
import { amtLower2Upper } from '@/utils'
import { getCustomerList } from '@/api/system/archives/customer'
import { getEmployeeList } from '@/api/system/archives/employee'

export default {
  name: 'SpApplyPrint',
  props: {
    keyId: {
      type: [String, Number],
      required: false,
      default: null
    },
    approve: {
      type: Object,
      required: false,
      default() {
        return {
          approveId: '',
          approveType: 'SN070201',
          approveResult: '',
          actTaskId: ''
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      toggleFlag: false,
      loadingFlag: false,
      formRef: 'formRefKey',
      form: {
        apCode: '',
        coName: '',
        deName: '',
        apDate: '',
        apReObj: '',
        apReObjName: '',
        apApprStateName: '',
        apProposerName: '',
        apRoTypeName: '',
        apSettMethName: '',
        apToAmount: '',
        creatorName: '',
        attachList: [],
        detailList: []
      },
      commonStyle: { width: '100%' },
      apRoNameList: [],
      adAmount: 0,
      adAmountUpper: ''
    }
  },
  created() {
    this.initialSpApplyDetail()
  },
  methods: {
    async initialSpApplyDetail() {
      const isFromApprove = !!this.approve.approveId
      const { data: res } = await getFinSpApplyById(isFromApprove ? this.approve.approveId : this.keyId)
      this.form = res
      const isUnit = this.form.apRoType === 'B140001'
      if (isUnit) {
        const { data: res } = await getCustomerList({ sealupState: '0' })
        this.apRoNameList = res.map((customer, idx) => Object.assign(customer, { commonName: customer.cuName }))
      } else {
        const { data: res } = await getEmployeeList({})
        this.apRoNameList = res.map((employee, idx) => Object.assign(employee, { commonName: employee.emName }))
      }
      const obj = this.apRoNameList.find(obj => obj.id === this.form.apReObj)
      this.$set(this.form, 'apReObjName', obj.commonName)

      let sum = 0
      this.form.detailList.forEach(x => { sum += x.adAmount })
      this.adAmount = sum
      this.adAmountUpper = amtLower2Upper(sum)
    }
  }
}
</script>

<style media="print">
  @page {
    size: auto;
    margin: 3mm;
  }
  html {
    background-color: #ffffff;
    margin: 0px;
  }
  body {
    border: solid 1px #ffffff;
  }
</style>
<style lang="scss" scoped>
  @media print {
    #printView {
      display: block;
      width: 100%;
      overflow: hidden;
    }
  }
</style>