用vue实现入库单的打印

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1、安装vue-print-nb插件

npm install vue-print-nb --save

2、在main.js文件中引入插件

import Print from 'vue-print-nb'

Vue.use(Print)

3、编写程序

  <div style="width: 37%" align="center">

    <div id="printTest" style="width: 100%" align="center">

      <h1>入库单</h1>

      <p>日期：2020年04月14日   供应商：中国古月口山玄幻有限公司   NO: HXD00001234</p>

      <div>

        <el-table :data="tableData" style="width: 100%" border="true">

          <el-table-column prop="encode" label="编码" width="85"></el-table-column>

          <el-table-column prop="name" label="品名" width="80"></el-table-column>

          <el-table-column prop="discription" label="品牌-型号-规格" width="250"></el-table-column>

          <el-table-column prop="unit" label="单位" width="50"></el-table-column>

          <el-table-column prop="quantity" label="数量" width="60"></el-table-column>

          <el-table-column prop="unitPrice" label="单价" width="60"></el-table-column>

          <el-table-column prop="amount" label="金额" width="60"></el-table-column>

          <el-table-column prop="remark" label="备注" width="50"></el-table-column>

        </el-table>

      </div>

      <p align="right">合计：168 元(RMB)</p>

      <p align="left">采购员：任我行   验货员：岳不群   负责人: 东方不败 仓管员：林平之</p>

    </div>

    <button v-print="'#printTest'">打印</button>

  </div>

4、运行效果

以上是 用vue实现入库单的打印 的全部内容， 来源链接： utcz.com/z/375647.html

回到顶部