vue-print-nb说明,vue实现批量打印print
这篇文章主要介绍了某视频剪辑软件打印插件vue-打印-nb的实现，需要引入插件npminstallvue-print-nb - save，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
1.引入插件新公共管理安装vue-打印-注意-保存
在主页。射流研究…中引入
从vue-print-nbVue.use导入打印（打印)
2.html代码
div class=box
div id=打印测试 class= upTable
桌子
tr
td class=title colspan=4 木材检尺报告书/td
/tr
tr
td class=one 船名/td
TD style= width:190 px { goods。船名} }/TD
td class=one 输出国/td
td{{ goods.exportCountry }}/td
/tr
tr
td class=one 树种/td
td{{ variety }}/td
td class=one 委托方/货主/td
td{{ goods.goodsMaster }}/td
/tr
tr
td class=one 申报材积/td
td{{ goods.declareWoodVolume }}立方米/td
td class=one 申报数量/td
td{{ goods.declareNumber }}根/td
/tr
tr
td class=one 存放地点/td
td{{ goods.goodsYard }}/td
td class=one 卸毕时间/td
TD v-if=货物。卸货时间“{货物。卸载时间。substring(0，10) }}/td
td v-else /
/tr
tr
td class=one 检验标准/td
td colspan=3GB/T 144-2013国家标准/td
/tr
tr
td class=title2 colspan=4 检验结果/td
/tr
/表格
table class=dataTable
tr
td style=width:210px 垛位号/td
td style=width:100px 长度/td
td style=width:100px 已检整木/td
td style=width:100px 材积/td
td style=width:100px 断木/td
td style=width:0 未检整木/td
/tr
tr v-for=(item，index) in shortData :key=index
td{{ item.placeNumber }}/td
td{{ item.placeLength }}/td
td{{ item.zs }}/td
td{{ item.woodVolume }}/td
td{{ item.damagedWood }}/td
td{{ item.notCheckWood }}/td
/tr
tr
td style=width:210px 合计/td
td style=width:100px /
TD style= width:100p x { { zsAll } }/TD
TD style= width:100p x { { woodVolumeAll } }/TD
TD style= width:100p x { { damagedWoodAll } }/TD
TD style= width:0px { { notcheckwood all } }/TD
/tr
/表格
/div
El-button v-print= # print test type= primary style= margin-top:20px
打印
/el-button
/div
3.js代码
脚本
导出默认值{
道具：[catList ， goods]，
data() {
返回{
//和下边style media=printTest 一起的作用是去掉页眉页脚、去掉多出空白页的问题
printObj: {
id:"打印测试",
popTitle: ，
电子邮件：""
},
短数据：[],
品种： ,
zsAll: 0，//已检整木总数
woodVolumeAll: 0，//材积
damagedWoodAll: 0，//断木
notCheckWoodAll: 0，//未检整木
更新时间：""
}
},
方法：{
//这里的数据是在父页面传来的
getvariety(品种、目录、商品){
多样化
这个。短数据=catlist this。商品=商品//合计
设zsAll=0
设woodVolumeAll=0
设damagedWoodAll=0
设notCheckWoodAll=0
this.shortData.map((item)={
zsAll=item.zs
woodVolumeAll=item.woodVolume
damagedWoodAll=item。受损木材
notcheckwood all=item。notcheckwood
})
this.zsAll=zsAll
这个。woodVolumeAll=woodVolumeAll
这个。damagedWoodAll=damagedWoodAll
notcheckwood all=notcheckwood all
},
}
}
/脚本
4.样式
style media=printTest
@page {
尺寸：自动；
边距：3毫米
}
html {
背景色：# ffffff
高度：自动；
边距：0px
正文{
边框：纯色1px # ffffff
边距：10毫米15毫米10毫米15毫米
/风格
style lang=less 范围。可上升的
宽度：100%;
身高：50%;
页边距-顶部：10px
表格{
宽度：100%;
边框-折叠：折叠
}
td{
边框：1px纯色# 000;
字体大小：18px
文本对齐：居中；
字体系列：来源汉Sans CN
字体粗细：450;
颜色：# 000000;标题{
字体大小：20px
高度：50px
字体粗细：550;一个
宽度：20%;
高度：40px。标题2{
高度：45像素。数据表{
border-top:0px solid # 000000；
td{
//border:1px solid # 000；
字体大小：18px
文本对齐：居中；
字体系列：来源汉Sans CN
字体粗细：450;
颜色：# 000000;
填充：5px 0；
}
}。埃尔按钮{
右边距：20px
左边距：20px
宽度：100像素
填充：12px 0；
到此这篇关于某视频剪辑软件打印插件vue-打印-nb的实现的文章就介绍到这了，更多相关某视频剪辑软件打印插件vue-打印-nb内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。