vue实现打印功能

已于 2023-03-14 16:13:26 修改
阅读量376 收藏 1
点赞数
文章标签： vue.js javascript 前端
于 2023-03-14 11:01:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45818024/article/details/129520546
版权

插件

npm install vue-print-nb --save
//安装好以后在main.js文件中引入 
import Print from 'vue-print-nb'
Vue.use(Print);  //注册

二、基本使用

1. 直接打印页面HTML

1）方法
① 给要打印的部分设置一个 id
② 在打印按钮中添加 v-print="'#id名'"

2）代码（以表格为例）

  <div id="printMe" ref="printContent" class="printBox">
      <div class="printTitle">热表分厂工艺路线卡</div>
      <table id="cus-table" cellspacing="0">
        <tr>
          <td>订单号</td>
          <td colspan="3">1</td>
          <td>使用部门</td>
          <td colspan="3">1</td>
          <td>单位</td>
          <td colspan="2">1</td>
        </tr>
        <tr>
          <td>零件号</td>
          <td colspan="3">1</td>
          <td>产品型号</td>
          <td colspan="3">1</td>
          <td>质量等级</td>
          <td colspan="2">1</td>
        </tr>
        <tr>
          <td>批次号</td>
          <td colspan="3">1</td>
          <td>名称</td>
          <td colspan="3">1</td>
          <td>数量</td>
          <td colspan="2">1</td>
        </tr>
        <tr>
          <td>材料</td>
          <td colspan="3">1</td>
          <td>零件面积</td>
          <td colspan="3">1</td>
          <td>设备编码</td>
          <td colspan="2">1</td>
        </tr>
        <tr>
          <td>镀种</td>
          <td colspan="7">1</td>
          <td>硬度</td>
          <td colspan="2">1</td>
        </tr>
        <tr>
          <td>标记要求</td>
          <td colspan="7">1</td>
          <td>工艺规程</td>
          <td colspan="2">1</td>
        </tr>
        <tr>
          <td>工艺路线</td>
          <td colspan="7">1</td>
          <td>技术状态</td>
          <td colspan="2">1</td>
        </tr>
        <tr>
          <td>关键信息</td>
          <td colspan="10">1</td>
        </tr>
        <tr>
          <td colspan="11">
            <div style="font-size:21px">生产过程记录</div>
          </td>
        </tr>
        <tr>
          <td colspan="11">
            生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据生产设备运行蔬菜数据
          </td>
        </tr>

        <tr>
          <td colspan="11" />
        </tr>
        <tr>
          <td rowspan="4">镀后</td>
        </tr>
        <tr>
          <td colspan="6">实际参数</td>
          <td colspan="2">操作者</td>
          <td colspan="2">设备编号</td>
        </tr>
        <tr>
          <td colspan="3">开始时间:2023/3/3</td>
          <td colspan="3">结束时间:2023/3/3</td>
          <td colspan="2">1</td>
          <td colspan="2">1</td>
        </tr>
        <tr>
          <td colspan="10">1</td>
        </tr>

        <tr>
          <td colspan="11" />
        </tr>
        <tr>
          <td>色标数量</td>
          <td colspan="2">序号</td>
          <td>颜色1</td>
          <td>1</td>
          <td>颜色2</td>
          <td>1</td>
          <td>油墨类</td>
          <td>1</td>
          <td>物料号</td>
          <td>1</td>
        </tr>
        <tr>
          <td>色带数量</td>
          <td colspan="2">序号</td>
          <td>颜色1</td>
          <td>1</td>
          <td>颜色2</td>
          <td>1</td>
          <td>油墨类</td>
          <td>1</td>
          <td>物料号</td>
          <td>1</td>
        </tr>
        <tr>
          <td rowspan="4">涂色标</td>
        </tr>
        <tr>
          <td colspan="6">实际参数</td>
          <td colspan="2">操作者</td>
          <td colspan="2">设备编号</td>
        </tr>
        <tr>
          <td colspan="3">开始时间:2023/3/3</td>
          <td colspan="3">结束时间:2023/3/3</td>
          <td colspan="2">1</td>
          <td colspan="2">1</td>
        </tr>
        <tr>
          <td colspan="10">1</td>
        </tr>

        <tr>
          <td colspan="11" />
        </tr>
        <tr>
          <td rowspan="5">市建委</td>
        </tr>
        <tr>
          <td>车间订单</td>
          <td colspan="2">1</td>
          <td>流程卡号</td>
          <td colspan="2">1</td>
          <td>批次</td>
          <td colspan="3">1</td>
        </tr>
        <tr>
          <td>产品号</td>
          <td colspan="2">1</td>
          <td>产品型号</td>
          <td colspan="2">1</td>
          <td>产品名</td>
          <td colspan="3">1</td>
        </tr>
        <tr>
          <td>镀种信息</td>
          <td colspan="2">1</td>
          <td>接收数</td>
          <td colspan="2">1</td>
          <td />
          <td colspan="3" />
        </tr>
        <tr>
          <td>已合格数</td>
          <td colspan="2">1</td>
          <td>报废数量</td>
          <td colspan="2">1</td>
          <td />
          <td colspan="3" />
        </tr>
        <tr>
          <td colspan="11">
            <div style="font-size:21px">检验记录</div>
          </td>
        </tr>
        <tr>
          <td>项目编号</td>
          <td>检测项目</td>
          <td>订单号</td>
          <td>零件号</td>
          <td>批次号</td>
          <td>设备量具编码</td>
          <td>试验数</td>
          <td>抽样数</td>
          <td>检验结果</td>
          <td>检验员</td>
          <td>检验日期</td>
        </tr>
        <template v-for="i in 6">
          <tr :key="i">
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
          </tr>
        </template>
        <tr>
          <td colspan="11">
            <div style="font-size:21px">镀后接收记录</div>
          </td>
        </tr>
        <tr>
          <td>车间订单</td>
          <td colspan="2">1</td>
          <td>流程卡号</td>
          <td colspan="3">1</td>
          <td>批次</td>
          <td colspan="3">1</td>
        </tr>
        <tr>
          <td>产品号</td>
          <td colspan="2">1</td>
          <td>产品型号</td>
          <td colspan="3">1</td>
          <td>产品名</td>
          <td colspan="3">1</td>
        </tr>
        <tr>
          <td>镀种信息</td>
          <td colspan="2">1</td>
          <td>当前工序</td>
          <td colspan="3">1</td>
          <td>接收数</td>
          <td colspan="3">1</td>
        </tr>
        <tr>
          <td>已合格数</td>
          <td colspan="2">1</td>
          <td>报废数量</td>
          <td colspan="3">1</td>
          <td />
          <td colspan="3" />
        </tr>
      </table>
    </div>

table td {
  width: 168px;
  height: 30px;
  border: 1px solid rgba(0, 118, 200, 0.3);
  background: transparent;
  color: #7a9cc2;
  font-size: 14px;
  text-align: center;
  padding: 0;
  margin: 0;
}
@media print {
  @page {
    size: auto;
    margin: 3mm;
  }
}

Cdlblbq
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue实现打印功能的两种方法
10-18
主要介绍了vue实现打印功能的两种方法,文中通过两种方法给大家介绍了指定不打印区域的解决方法，需要的朋友可以参考下
Vue前端使用Window.print打印页面，能根据表格数量分页，空白页问题解决（一看就懂）
qq_52753722的博客
11-15 1446
windows.print()打印
vue 中使用菜鸟打印
麦壳的记忆
06-13 3096
这篇来简单介绍一下使用菜鸟打印的流程 一：选择要打印的订单，这里可以自由做一些筛选，比如只有待发货的订单才能打印 二：拿到要打印的订单集合后，就要开始进行打印了 1.首先初始化 WebSocket 这里最好全局初始化一下，不用重复的初始化这个WebSocket doConnect() { var that=this; t...
vue使用vue-print-nb打印佳博PT-261标签
最新发布
m0_37864378的博客
03-28 238
vue使用vue-print-nb打印佳博PT-261标签
vue项目中使用cn打印组件
web_hj的博客
01-18 3031
最近项目中要对接订单信息，打印快递面单。这里记录下开发流程。 前端方面流程还是很简单的。 1.电脑安装 连接好打印机 并安装对应打印机驱动 2.电脑安装 菜鸟打印组件 下载地址：http://cloudprint.cainiao.com/cloudprint/client/CNPrintSetup.exe?spm=a219a.7629140.0.0.YJQX7O&file=CNPrintSetup.exe 3.在开始打印前 要注意你的快递面单尺寸，在打印组件中需要设置对...
【vue】实现打印功能
SunPeng的博客
11-27 1万+
【vue】实现打印功能
vue中使用快递鸟打印订单
麦壳的记忆
06-13 3357
最近在做打印这一块的东西，发货时候打印快递单对接的快递鸟的，这里记录一下使用的小结 一：首先使用快递鸟需要引入 LodopFuncs.js 这个 二：选择要打印的订单，这里可以自由做一些筛选，比如只有待发货的订单才能打印 三：拿到要打印的订单集合后，就下来就要使用Lodop来打印了 1.初始化Lodop ，在使用打印的地方引入 LodopFuncs.js文件 printdata()...
vue中实现打印功能的几种方法
weixin_44982333的博客
10-31 1万+
js ts vue3中实现打印功能的几种方式
vue打印 vue-print-nb
weixin_58346650的博客
04-28 1839
安装相关插件 cnpm i vue-print-nb --save 在main.js里面全局引用 import Print from 'vue-print-nb' // 引入 Vue.prototype.$print = Print; // 挂载 Vue.use(Print); // 使用 页面代码 <button v-print="print" type="primary"> <span>打印</span> </button>
vue中实现打印
weixin_39255905的博客
01-28 9089
vue中实现打印
vue 实现打印功能
qq_53489791的博客
12-27 4579
vue 打印
Vue实现浏览器打印功能的代码
10-15
主要介绍了Vue实现浏览器打印功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue+element实现打印页面功能
10-16
主要介绍了vue+element实现打印页面功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
vue实现lodop打印功能的示例
01-18
3.vue部分实现 　3.1将lodopDuncs.js文件放入工程中，具体操作可见：http://www.lodop.net/faq/pp35.html 3.2 编写代码 <button class=print-btn v-on:click=btnClickPrint> <span>{{ msg }} </...
vue跳过预览实现自动打印功能
m0_66567770的博客
07-26 4392
最近项目有个需求,用户下单,商家端自动打印小票,在网上找了很多办法,基本都不能跳过预览,最后经过不断尝试,最终选择了lodop实现,该控件预览打印没有问题,但是跳过预览会出现"试用版"水印,如需去除水印,请购买正式版控件。......
vue如何实现打印功能
热门推荐
Cherry
08-06 2万+
这里用的是 vuePlugs_printjs 1，首先打开git地址 2，然后将 print.js 下载到本地放入项目文件夹 使用方法如下： //首先在main.js引入 import Print from './utils/print.js' Vue.use(Print) <div ref=print>打印内容<div/> //其次在你用到的地方触发这个方法即可 handleprinter() { this.$print(this.$refs.print); } 当
vue 打印页面功能
lidecsdn的博客
07-11 192
【代码】vue 打印页面功能。
vue表格数据打印功能的实现
huxihua2006的博客
02-03 2085
vue表格数据打印
vue和springboot实现打印功能
04-23
实现打印功能可以通过以下步骤： 1. 在前端使用Vue框架，通过HTML和Vue组件实现打印页面的布局和样式。 2. 使用JavaScript的window.print()方法，将打印页面打印到打印机上。 3. 在后端使用Spring Boot框架，实现...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值