vue 打印功能

最新推荐文章于 2024-10-11 16:14:42 发布

怪哈哈

最新推荐文章于 2024-10-11 16:14:42 发布

阅读量2.1k

点赞数

分类专栏： vue PC 文章标签：前端

本文链接：https://blog.csdn.net/guairena/article/details/123822851

版权

需求：
请求到后端数据，渲染成表格，通过打印机打印出来
在这里插入图片描述

代码实现：
list.vue

<template>
  <div>
    <div class="printBox">
      <div>
        <el-button type="primary" @click="printBtn" size="small">打印</el-button>
      </div>
      <div ref="printContent">
        <div class="receiptListBox">
          <div class="time">
            预计到货日期：{
  {detailInfo.arrivalDate}}
          </div>
          <div class="typeNum">
            商品种类：{
  {detailInfo.totalSguQty}} 发货总数：{
  {detailInfo.totalGoodsQty}}
          </div>
          <!-- 表格: tableData表体数组 propsList表头 -->
          <print-table 
            v-if="detailInfo.orderGoodsSummaryVoList && detailInfo.orderGoodsSummaryVoList.length > 0"
            class="print-table" 
            :pages="false"
            :tableData="detailInfo.orderGoodsSummaryVoList"
            :propsList="propsList"
          />
        </div>
        <div class="curTime">
          打印时间：{
  {currentTime}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>

const activityUrl = {
     
  // 合伙人-收货单详情
  receiveOrderSummaryDetail: '/bazaar/a/o/copartner/summaryOrder/receiveOrderSummaryDetail',
  // 合伙人-播种单
  selectSowOrder: '/bazaar/a/o/copartner/summaryOrder/selectSowOrder',
}

import Storage from "@/utils/localStorage"
import PrintTable from '@/components/Common/Print/PrintTable'
import winPrinter from '@/utils/winPrinter';
import {
     dateFormat} from '@/utils/utils'

export default {
     
  name: 'receiptDetail',
  data() {
     
    return {
     
      detailInfo: {
     },
      searchInfo: {
     },
      propsList: [
        {
     
          name: '序号',
          props: 'index',
          align: 'center'
        },
        {
     
          name: '商品编码',
          props: 'goodsNo',
          align: 'center'
        },
        {
     
          name: '商品名称',
          props: 'goodsName',
          align: 'center'
        },
        {
     
          name: '商品规格',
          props: 'spec',
          align: 'center'
        },
        {
     
          name: '存储温度',
          props: 'storageTypeName',
          align: 'center'
        },
        {
     
          name: '应收件数',
          props: 'totalQuantity',
          align: 'center'
        },
        {
     
          name: '发货件数',
          props: 'totalPickQty',
          align: 'center'
        },
        {
     
          name: '缺货件数',
          props: 'totalLackQty',
          align: 'center'
        }
      ],
      currentTime: dateFormat('yyyy-MM-dd HH:mm', new Date().getTime()), // 当前时间
    }
  },
  components: {
     
    'print-table': PrintTable
  },
  created() {
     
   let pathArr = this.$route.path.split('/')
    let pageId = pathArr[2]
    if (Storage.get('jumpReport') && Storage.get('jumpReport') != 'undefined') {
     
      let obj = Storage.get('jumpReport')
      for (let key in obj) {
     
        let keyArr = key.split('/')
        let _pageId = keyArr[1]
        if (_pageId