vue: table制作发货单表格并打印

最新推荐文章于 2024-08-22 17:54:44 发布

yazhiShaw

最新推荐文章于 2024-08-22 17:54:44 发布

阅读量4.3k

点赞数 16

分类专栏： Vue 文章标签： table 打印

本文链接：https://blog.csdn.net/weixin_39357177/article/details/114323346

版权

这篇博客介绍了如何在Vue项目中创建一个发货单表格，并实现打印功能。通过在vue文件中编写表格，新建print.js文件处理打印逻辑，最后在main.js中引入print模块，实现了前端页面表格内容的打印功能。

摘要由CSDN通过智能技术生成

最近做了个库存管理系统，产品经理要求前端页面展示表格内容，并且打印。效果如下：

1.首先是vue文件（无需安装任何依赖，复制粘贴可用）

<template>
  <div class="my-multi-table">
    <div class="button_group">
      <el-button type="primary" @click="editSend">编辑</el-button>
      <el-button type="primary" @click="printSendTable">打印运输交接单</el-button>
      <el-button type="primary" @click="previewSendTable">查看出库单</el-button>
    </div>
    <div class="print" ref="print">
      <div style="margin:0 auto;">
        <div
          style="color: #666666; text-align:center;margin-top:30px; margin-bottom: 10px; display: flex; justify-content: space-between;"
        >
          <div>XXX有限公司</div>
          <div>2-SMP-MC-01-015</div>
        </div>
        <h3 style="text-align:center;margin-top:30px; margin-bottom: 10px">冷链发货运输交接单</h3>
        <div style="text-align:right; margin-bottom: 10px">编号：_________________</div>
        <table
          style="width: 100%"
          class="table table-striped table-bordered"
          align="center"
          valign="center"
        >
          <tr>
            <td class="column" colspan="8">基本信息（发货人填写）</td>
          </tr>
          <tr>
            <td class="column" colspan="2">供货单位/生产商</td>
            <td class="value" colspan="6"></td>
          </tr>
          <tr>
            <td class="column" colspan="2">收货单位</td>
            <td class="value" colspan="3"></td>
            <td class="column">收件人</td>
            <td class="value" colspan="2"></td>
          </tr>
          <tr>
            <td class="column" colspan="2">收货地址</td>
            <td class="value" colspan="3"></td>
            <td class="column">电话</td>
            <td class="value" colspan="3"></td>
          </tr>
          <tr>
            <td class="column" colspan="2">客户PO号码</td>
            <td class="value" colspan="2"></td>
            <td class="column" colspan="1">发货仓库</td>
            <td class="value" colspan="3"></td>
          </tr>
          <tr>
            <td class="column">序号</td>
            <td class="column">药品名称</td>
            <