用vue实现入库单的打印「建议收藏」

用vue实现入库单的打印「建议收藏」1、安装vue-print-nb插件npminstallvue-print-nb–save2、在main.js文件中引入插件importPrintfrom’vue-print-nb’Vue.use(Print)3、编写程序<divstyle=”width:37%”align=”center”><divid=”printTest”s…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

1、安装vue-print-nb插件
npm install vue-print-nb –save
2、在main.js文件中引入插件
import Print from ‘vue-print-nb’
Vue.use(Print)
3、编写程序
  <div style=”width: 37%” align=”center”>
    <div id=”printTest” style=”width: 100%” align=”center”>
      <h1>入库单</h1>
      <p>日期:2020年04月14日   供应商:中国古月口山玄幻有限公司   NO: HXD00001234</p>
      <div>
        <el-table :data=”tableData” style=”width: 100%” border=”true”>
          <el-table-column prop=”encode” label=”编码” width=”85″></el-table-column>
          <el-table-column prop=”name” label=”品名” width=”80″></el-table-column>
          <el-table-column prop=”discription” label=”品牌-型号-规格” width=”250″></el-table-column>
          <el-table-column prop=”unit” label=”单位” width=”50″></el-table-column>
          <el-table-column prop=”quantity” label=”数量” width=”60″></el-table-column>
          <el-table-column prop=”unitPrice” label=”单价” width=”60″></el-table-column>
          <el-table-column prop=”amount” label=”金额” width=”60″></el-table-column>
          <el-table-column prop=”remark” label=”备注” width=”50″></el-table-column>
        </el-table>
      </div>
      <p align=”right”>合计:168 元(RMB)</p>
      <p align=”left”>采购员:任我行   验货员:岳不群   负责人: 东方不败 仓管员:林平之</p>
    </div>
    <button v-print=”‘#printTest'”>打印</button>
  </div>
4、运行效果

用vue实现入库单的打印「建议收藏」

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/193255.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • BoundsChecker用法「建议收藏」

    最近我发现我那个程序泄露严重,手动也查不出来。指针乱指。所以刚下了个BoundChecker6.0版的嘿嘿ie在网上看到了它的用法,感觉还不错。BoundsChecker用法http://blog.sina.com.cn/u/53d9f7e9010007fzBoundsChecker是一个Run-Time错误检测工具,它主要定位程序在运行时期发…

    2022年4月8日
    40
  • 第三章 文件的描述符和重定向

    第三章 文件的描述符和重定向

    2022年4月2日
    38
  • 行列式运算法则 矩阵的运算及其运算规则:「建议收藏」

    行列式运算法则 矩阵的运算及其运算规则:「建议收藏」1、三角形行列式的值,等于对角线元素的乘积。计算时,一般需要多次运算来把行列式转换为上三角型或下三角型2、交换行列式中的两行(列),行列式变号(交换)3、行列式中某行(列)的公因子,可以提出放到行列式之外。(倍乘)(注:矩阵是全部元素都乘,都提取)4、行列式的某行乘以a,加到另外一行,行列式不变,常用于消去某些元素。(倍加)5、若行列式中,两行(列)完全一样,则行列式为0;可以推论,如果两…

    2022年10月22日
    0
  • 懒加载(Lazy Loading) – MyBatis懒加载 – Spring懒加载

    懒加载(Lazy Loading) – MyBatis懒加载 – Spring懒加载文章目录懒加载(LazyLoading)MyBatis中懒加载的使用Spring中懒加载的使用懒加载(LazyLoading)  懒加载也叫“延迟价值”,核心思想是把对象的实例化延迟到真正调用该对象的时候,这样做的好处是可以减轻大量对象在实例化时对资源的消耗,而不是在程序初始化的时候就预先将对象实例化。另外“懒加载”可以将对象的实例化代码从初始化方法中独立出来,从而提高代码的可读性,以便于代码能够更好地组织。  特别是在web应用程序中,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据

    2025年6月7日
    0
  • 从零搭建SpringCloud服务(史上最详细)

    点击上方“全栈程序员社区”,星标公众号 重磅干货,第一时间送达 作者:Anakki blog.csdn.net/qq_29519041/article/details/852382…

    2021年6月27日
    110
  • apache tomcat安装及配置教程_iphone配置实用工具在哪下载

    apache tomcat安装及配置教程_iphone配置实用工具在哪下载一、下载tomcat下载链接:https://tomcat.apache.org/1、进入tomcat官网后,选择需要下载的版本。我使用的是tomcat9,所以在这我选择tomcat92、选择z

    2022年8月3日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号