您现在的位置是:首页 > 正文

vue-print-nb 组件打印网页

2024-02-01 03:35:10阅读 2

 

一、安装组件

npm install vue-print-nb --save

 

二、引入组件

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

三、使用

<div id="printMe" >
    <p>打印内容</p>
</div>
<button v-print="'#printMe'">打印</button>

 四、设置打印样式

在<style>标签里面谢样式

@page {
  margin: 0;
}
@media print {
  .noprint {
    display: none;
  }
}

五、完整代码示例

<template>
  <el-dialog
    :append-to-body="true"
    :close-on-click-modal="false"
    :before-close="cancel"
    :visible.sync="dialog"
    :title="isAdd ? '新增' : '订单详情'"
    width="990px"
  >
    <div id="printTest">
      <el-card>
        <div slot="header">
          <span>收货信息</span>
        </div>
        <div class="text item">用户昵称:{{ form.nickname }}</div>
        <div class="text item">收货人: {{ form.realName }}</div>
        <div class="text item">联系电话: {{ form.userPhone }}</div>
        <div class="text item">收货地址: {{ form.userAddress }}</div>
      </el-card>
      <el-card>
        <div slot="header">
          <span>订单信息</span>
        </div>
        <el-row :gutter="24">
          <el-col :span="12">
            <div class="text item">订单编号: {{ form.orderId }}</div>
            <div class="text item">商品总数: {{ form.totalNum }}</div>
            <div class="text item">支付邮费: {{ form.totalPostage }}</div>
            <div class="text item">实际支付: {{ form.payPrice }}</div>
            <div class="text item">支付方式: {{ form.payTypeName }}</div>
          </el-col>
          <el-col :span="12">
            <div class="text item">订单状态: {{ form.statusName }}</div>
            <div class="text item">商品总价: {{ form.totalPrice }}</div>
            <div class="text item">优惠券金额: {{ form.couponPrice }}</div>
            <div class="text item">创建时间: {{ formatTimeTwo(form.addTime) }}</div>
            <div class="text item">支付时间: {{ formatTimeTwo(form.payTime) }}</div>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <div slot="header">
          <span>商品信息</span>
        </div>
        <el-row :gutter="24">
          <!--表格渲染-->
          <el-table
            v-loading="loading"
            :data="form.cartInfoList"
            size="small"
            style="width: 100%;font-size:10px;"
          >
            <el-table-column prop="cartInfoMap.productInfo.barCode" label="商品编码" />

            <el-table-column prop="cartInfoMap.productInfo.storeName" label="商品名称" />
            <el-table-column prop="cartInfoMap.productInfo.attrInfo.suk" label="规格" />
            <el-table-column prop="cartInfoMap.cartNum" label="销售数量" />
            <el-table-column prop="cartInfoMap.productInfo.otPrice" label="市场价格" />
            <el-table-column prop="cartInfoMap.productInfo.price" label="呐喊价格" />
            
            <el-table-column label="库存">
              <template slot-scope="scope">
                <span
                  v-if="scope.row.cartInfoMap.productInfo.stock != '点击查看'"
                >{{scope.row.cartInfoMap.productInfo.stock}}</span>
                <span>
                  <el-button
                    v-if="scope.row.cartInfoMap.productInfo.stock == '点击查看'"
                    size="mini"
                    @click="showStock(scope.row)"
                  >查库存</el-button>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-card>

      <el-card>
        <div slot="header">
          <span>物流信息</span>
        </div>
        <div class="text item">快递公司:{{ form.deliveryName }}</div>
        <div class="text item">快递单号:{{ form.deliveryId }}</div>
      </el-card>
      <el-card>
        <div slot="header">
          <span>备注信息</span>
        </div>
        <div class="text item">{{ form.remark }}</div>
      </el-card>
      <el-card>
        <div slot="header">
          <span>客户备注信息</span>
        </div>
        <div class="text item">{{ form.mark }}</div>
      </el-card>
      
    </div>
    <span slot="footer" class="dialog-footer noprint">
        <el-button @click="dialog = false">关 闭</el-button>
        <el-button type="primary" v-print="'#printTest'">打 印</el-button>
      </span>
  </el-dialog>
</template>

<script>
import { add, edit, levelPriceList } from "@/api/yxStoreOrder";
import { formatTimeTwo } from "@/utils/index";
import { detail } from "@/api/yxStoreProduct";
import Print from "vue-print-nb";
import Vue from "vue";
Vue.use(Print);
export default {
  components: {
    Print
  },
  props: {
    isAdd: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      dialog: false,
      form: {
        id: "",
        orderId: "",
        uid: "",
        realName: "",
        userPhone: "",
        userAddress: "",
        cartId: "",
        freightPrice: "",
        totalNum: "",
        totalPrice: "",
        totalPostage: "",
        payPrice: "",
        payPostage: "",
        deductionPrice: "",
        couponId: "",
        couponPrice: "",
        paid: "",
        payTime: "",
        payType: "",
        addTime: "",
        status: "",
        refundStatus: "",
        refundReasonWapImg: "",
        refundReasonWapExplain: "",
        refundReasonTime: "",
        refundReasonWap: "",
        refundReason: "",
        refundPrice: "",
        deliveryName: "",
        deliveryType: "",
        deliveryId: "",
        gainIntegral: "",
        useIntegral: "",
        backIntegral: "",
        mark: "",
        isDel: "",
        unique: "",
        remark: "",
        merId: "",
        isMerCheck: "",
        combinationId: "",
        pinkId: "",
        cost: "",
        seckillId: "",
        bargainId: "",
        verifyCode: "",
        storeId: "",
        shippingType: "",
        isChannel: "",
        isRemind: "",
        isSystemDel: ""
      },
      rules: {
        unique: [{ required: true, message: "please enter", trigger: "blur" }]
      }
    };
  },
  methods: {
    formatTimeTwo,
    showStock(row) {
      detail(row.cartInfoMap.productInfo.id).then(res => {
        row.cartInfoMap.productInfo.stock = res.stock;
      });
    },
    cancel() {
      this.resetForm();
    },
    doSubmit() {
      this.loading = true;
      if (this.isAdd) {
        this.doAdd();
      } else this.doEdit();
    },
    doAdd() {
      add(this.form)
        .then(res => {
          this.resetForm();
          this.$notify({
            title: "添加成功",
            type: "success",
            duration: 2500
          });
          this.loading = false;
          this.$parent.init();
        })
        .catch(err => {
          this.loading = false;
          console.log(err.response.data.message);
        });
    },
    doEdit() {
      edit(this.form)
        .then(res => {
          this.resetForm();
          this.$notify({
            title: "修改成功",
            type: "success",
            duration: 2500
          });
          this.loading = false;
          this.$parent.init();
        })
        .catch(err => {
          this.loading = false;
          console.log(err.response.data.message);
        });
    },
    resetForm() {
      this.dialog = false;
      this.form = {
        id: "",
        orderId: "",
        uid: "",
        realName: "",
        userPhone: "",
        userAddress: "",
        cartId: "",
        freightPrice: "",
        totalNum: "",
        totalPrice: "",
        totalPostage: "",
        payPrice: "",
        payPostage: "",
        deductionPrice: "",
        couponId: "",
        couponPrice: "",
        paid: "",
        payTime: "",
        payType: "",
        addTime: "",
        status: "",
        refundStatus: "",
        refundReasonWapImg: "",
        refundReasonWapExplain: "",
        refundReasonTime: "",
        refundReasonWap: "",
        refundReason: "",
        refundPrice: "",
        deliveryName: "",
        deliveryType: "",
        deliveryId: "",
        gainIntegral: "",
        useIntegral: "",
        backIntegral: "",
        mark: "",
        isDel: "",
        unique: "",
        remark: "",
        merId: "",
        isMerCheck: "",
        combinationId: "",
        pinkId: "",
        cost: "",
        seckillId: "",
        bargainId: "",
        verifyCode: "",
        storeId: "",
        shippingType: "",
        isChannel: "",
        isRemind: "",
        isSystemDel: ""
      };
    }
  }
};
</script>

<style scoped>
@page {
  margin: 0;
}
@media print {
  .noprint {
    display: none;
  }
}

.text {
  font-size: 12px;
}

.item {
  padding: 6px 0;
}
</style>

六、遇到的问题

遇到了几个问题 这里列出来

1、无法加载组件

后台报错 : [Vue warn]: Failed to resolve directive: print

解决办法

先引入Vue

再调用 Vue.use(Print);

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

2、打印内容不全,显示滚动条

在页面中显示正常,打印预览的时候内容显示不全,显示滚动条,并且不分页

解决办法

使用css控制打印样式

@page {
  margin: 0;
}
@media print {
  .noprint {
    display: none;
  }
}

背景色不能打印

在需要背景色的标签上面加上这个样色即可

.value {
    -webkit-print-color-adjust: exact;
    background-color: #eee;
    padding: 8px;
    font-size: 12px;
    min-width: 80px;
  }

打印多一页空白页

检查要打印的标签是不是用margin属性,margin属性会导致多一页空白页面。有的话想办法用padding来实现相同显示效果。

 

 

 

 

网站文章

  • K8S安装及卸载dashboard

    K8S安装及卸载dashboard

    k8s v1.23 安装dashboard v2.5.1; 三种暴漏dashboard的方式; 设置使用http访问dashboard;

    2024-02-01 03:34:40
  • Linux安装Redis数据库,实现远程连接

    Linux安装Redis数据库,实现远程连接

    Redis作为一款高速缓存的key value键值对的数据库,在许许多多的场景中广泛使用,由于是把数据存储在内存中,所以读写效率极高。下面介绍如何在内网虚拟机的linux中搭建redis并通过cpolar内网穿透实现公网访问。

    2024-02-01 03:34:34
  • Linux C语言中access函数的用法

    Linux C语言中access()函数的使用方法。

    2024-02-01 03:34:27
  • 工作记录---静态库和动态库

    1.静态库就是直接将需要的代码连接进可执行程序; 动态库就是在需要调用其中的函数时,根据函数映射表找到该函数然后调入堆栈执行。

    2024-02-01 03:33:57
  • 有名管道与无名管道以及他们之间的区别

    有名管道与无名管道以及他们之间的区别

    有名管道与无名管道以及他们之间的区别

    2024-02-01 03:33:51
  • 特征工程之mushroom classification

    库import numpy as np # linear algebraimport pandas as pd # data processing, CSV file I/O (e.g. pd.read_csv)import matplotlib.pyplot as pltimport seaborn as snsfrom matplotlib.pyplot import figure...

    2024-02-01 03:33:44
  • 简单区分数据库之中的1NF、2NF、3NF、BCNF

    简单理解主属性、非主属性、部分函数依赖、完全函数依赖、传递函数依赖。简单区分1NF、2NF、3NF、4NF

    2024-02-01 03:33:40
  • 【ensp的OSPF多区域配置】

    【ensp的OSPF多区域配置】

    ensp是华为公司提供的一款模拟器,它可以在计算机上模拟出真实的华为网络设备,并支持OSPF协议的配置。OSPF(Open Shortest Path First)是一种开放式最短路径优先协议,它可以...

    2024-02-01 03:33:09
  • ChatGPT大更新!联网/插件功能无需排队,Plus用户下周即可体验

    ChatGPT大更新!联网/插件功能无需排队,Plus用户下周即可体验

    好消息,ChatGPT的联网和插件功能不用等了!OpenAI刚刚宣布,。具体来说,在最新的联网和插件Beta版中,ChatGPT会在设置里增加这样一个界面:回顾一下,网页浏览功能,能让ChatGPT不...

    2024-02-01 03:33:03
  • 如何配置 Kafka 无消息丢失

    如何配置 Kafka 无消息丢失

    kafka在三个阶段可能出现消息丢失,分别是生产消息、消费消息、页缓存操作后异步刷盘。

    2024-02-01 03:32:57