vue-print-nb 组件打印网页

最新推荐文章于 2024-05-08 15:52:58 发布
最新推荐文章于 2024-05-08 15:52:58 发布
阅读量3.5k 收藏 6
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiehuanqing00/article/details/106810820
版权

 

一、安装组件

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来实现相同显示效果。

 

 

 

 

debug time
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-print-nb 兼容低版本浏览器
11-28
vue-print-nb 兼容低版本浏览器 import Print from '@/lib/vue-print-nb/print.umd.min'Vue.use(Print)
vue-print:基于vue-print-nb打印组件做的功能拓展
05-07
vue-print基于vue-print-nb打印组件的拓展功能,下载后放在项目中引用详情请看博客介绍Installmain.js文件引用import Print from './xxxx/vue-print-nb/src'Vue.use(Print);
vue html页面打印功能vue-print-nb
11-19 1662
vue html页面打印功能vue-print-nb vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-nb 本博客源码:https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个 https://github.com/shengbid/vue-demo 这个项目里平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈 使...
vue实现打印功能（vue-print-nb）
qq_41842461的博客
08-23 1万+
vue实现打印功能（vue-print-nb)
Vue利用vue-print-nb实现打印功能
最新发布
weixin_38409915的博客
05-08 540
这个方法可以自定义打印区域，并且保留原有样式，缺点是打印区域的样式不能和打印区域外的样式相关联。同事我们也可以在通过@media print来对需要打印的区域进行样式设置，自由度比较好一些，具体更多使用方式还是大家一起去发掘。
vue插件——vue-print-nb 实现打印功能
yehaocheng520的博客
02-26 2006
vue插件——vue-print-nb 实现打印功能
vue报错：Failed to resolve directive: (found in ＜Anonymous＞)
code^_^熊的博客
02-01 1万+
问题 分析与解决   “未能解析指令”，检查一下是否有拼写错误或者不正当的空格(例如"v-model" 写成了 “v -model”)
vue2 使用vue-print-nb实现打印功能
MyOxygen的博客
07-06 7105
打印对象的回调函数内，this指向当前printObject object对象，that返回Vue对象；打印时发现，打印的效果不是想要的，或者表格边框线显示不全，使用媒体查询设置打印的样式。若想实现分页，给要分页的元素加上page-break-after: always;记录使用vue-print-nb插件实现打印功能的过程。打印的指令值可以是 具体的id值。给打印的区域设置id值。
vue2中vue-print-nb实现打印功能
DZQ1223的博客
03-28 1146
若打印时，末尾总是出现空白页，则存在定义了height:100%的元素，删除掉此样式即可 通常都是因为存在以下样式导致,通常被定义在全局样式文件中，或index.html中。您可以通过在需要隐藏的div上添加class=“no-print”，然后在打印样式中设置该类的display属性为none来实现隐藏。设置打印内容样式，不影响页面原有样式 以下内容为设置 element table 在打印时的样式，防止打印不全。在要进行分页的标签上，添加以下样式。或者 在需要分页的内容最后加上。
vue-print-nb:Vue插件，打印！ 好的！
05-12
vue-print-nb 这是用于包装，简单，快速，方便，轻便的指令包装纸。 安装 Vue2版本： npm install vue-print-nb --save import Print from 'vue-print-nb' // Global instruction Vue . use ( Print ) ; //or // ...
vue-print-nb-z
05-06
light.InstallNPMnpm install vue-print-nb-z --saveimport Print from 'vue-print-nb'// Global instruction Vue.use(Print);//or// Local instructionimport print from 'vue-print-nb'directives:
vue中使用vue-print.js实现多页打印
11-21
由于打印插件存在问题，如果打印文件超出一页，只显示一页，所以我们需要修改print.js源文件，所以只能手动下载vue-print.js到本地，做一些修改，然后引入到项目中，不能使用npm安装 下载 print.js ...
vue-print-nb 解决 vue 打印问题，并且隐藏页眉页脚
热门推荐
Insist_bin的博客
07-20 1万+
1、通过 npm 安装 vue-print-nb npm install vue-print-nb --save 2、挂载到 Vue 上 ​import Print from 'vue-print-nb' Vue.use(Print) 3、配置打印对象 <div id="main"> 这里是要打印的东西 </div> <!-- 打印按钮，通过 v-print 调用打印事件 --> <button v-print="printObj">打印&lt
vue3-print-nb 实现页面打印（含分页打印）
u013553807的博客
03-03 5814
html的打印
推荐开源项目：Vue-Print-NB - 简单易用的Vue.js打印解决方案
gitblog_00077的博客
04-15 510
推荐开源项目：Vue-Print-NB - 简单易用的Vue.js打印解决方案 项目地址:https://gitcode.com/Power-kxLee/vue-print-nb 在前端开发中，我们经常需要为用户提供打印功能，例如报表、合同等。然而，实现这样的功能并非易事，涉及到CSS样式调整、页面布局和浏览器兼容性等问题。这就是我今天要向大家推荐的Vue-Print-NB项目的由来，它是一个专门...
Vue中好用的打印组件 vue-print-nb
szx1175673566的博客
01-29 1225
Vue中好用的打印组件 vue-print-nb
Vue：成功解决[Vue warn]: Failed to resolve directive: modle (found in <Anonymous>)
qq_44928869的博客
10-23 2939
解决方案：在做搜索框操作时需要用v-model绑定文本框的值，但是文本框的需要vue的双向数据绑定v-model，错将v-model打成v-modle
vue-print-nb 分页打印
10-08
对于Vue.js中的分页打印，你可以使用vue-print-nb插件来实现。vue-print-nb是一个基于Vue.js的打印插件，可以方便地实现网页的分页打印功能。 首先，你需要在你的Vue项目中安装vue-print-nb插件。可以使用npm或yarn来进行安装： ``` npm install vue-print-nb --save ``` 或者 ``` yarn add vue-print-nb ``` 安装完成后，在你的Vue项目的入口文件（如main.js）中导入vue-print-nb，并将其注册为全局组件： ```javascript import Vue from 'vue' import VuePrintNB from 'vue-print-nb' Vue.use(VuePrintNB) ``` 然后，在你需要进行打印的组件中，使用vue-print-nb组件包裹需要打印的内容： ```html <template> <div> <!-- 打印按钮 --> <button @click="print">打印</button> <!-- 需要打印的内容 --> <vue-print-nb ref="printContent"> <div> <!-- ... --> </div> </vue-print-nb> </div> </template> <script> export default { methods: { print() { // 调用vue-print-nb插件的打印方法 this.$refs.printContent.print() } } } </script> ``` 以上代码中，我们在需要打印的内容外部包裹了一个vue-print-nb组件，并给它添加了一个ref属性，用于获取组件的实例。然后，在打印按钮的点击事件中，调用print方法即可触发打印。 请注意，vue-print-nb插件提供了一些配置项，你可以根据需要进行设置。具体的配置信息和更多用法，请参考vue-print-nb的文档。 希望以上信息对你有帮助！如果你还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值