vue使用v-print-nb插件实现A4纸张排版打印

1、安装v-print-nb插件

 npm install vue-print-nb --save

2、数据加载

/*打印预览*/printPdf(mergeEbeln) {this.signal = false;this.dylist = [];getPrintList({mergeEbeln:mergeEbeln}).then(response => {/*分页*/if (response.data.listdetail.length > 0) {response.data.text = "";this.inServForm = response.data//使用 .replace(/[\t]/g,''); 替换\t转义符，防止页面变形this.inServForm.modeldes = this.inServForm.modeldes.replace(/[\t]/g,'');this.dylist = this.doSplice(response.data.listdetail, 14)/*判断最后的签名信息是否单独起一页*/if (this.dylist[this.dylist.length - 1].length > 10) {this.signal = true}this.printShow = true}})},

3、排版

changeFormat(){/*排版*/var declareHeight = this.$refs.declare.clientHeight;/*合同文本像素高度*/var changeFormatDIVHeight = this.$refs.changeFormatDIV.clientHeight;/*2cm*/var decalreReallyHeight = Math.floor((declareHeight/changeFormatDIVHeight)*2);/*合同文本厘米高度*/var leftHeight = 29.7-1.5-decalreReallyHeight;/*剩余部分高度*/var colunmNum = Math.floor(leftHeight/2);/*能放下几行*/this.dylist=[];/*分页*/var tempList = this.inServForm.listdetail;if (tempList.length > colunmNum) {this.dylist = this.doSpliceFormat(tempList,14,colunmNum);}else {this.dylist.push(tempList);}/*判断最后的签名信息是否单独起一页*/if(this.dylist.length>1){if (this.dylist[this.dylist.length - 1].length > 10) {this.signal = true;} else {this.signal = false;}}else if (this.dylist.length==1) {if (colunmNum - this.dylist[0].length<3){this.signal = true;} else {this.signal = false;}}this.printShow = truethis.$refs.printHandle.$el.click();},

4、打印预览

<!--打印页面--><!--startprint--><el-dialog title="打印预览" :visible.sync="printShow" width="22cm" append-to-body><el-form :model="inServForm" ref="inServForm" size="small"><el-form-item><div  ref="changeFormatDIV" style="height: 2cm"><el-buttonv-print="'#printPage'"type="primary"icon="el-icon-printer"ref="printHandle"></el-button><el-buttontype="danger"plainicon="el-icon-printer"@click="changeFormat"style="margin-left: -50px;width: 2cm">打印</el-button></div></el-form-item><div id="printPage" ref="printPage" style="width: 21cm;page-break-before:always;margin: 0cm 1cm 1cm 0.5cm;"><template><!-- el-table 或其他待打印内容 --></template></div><el-form-item style="text-align: right"><el-buttontype="danger"plainicon="el-icon-printer"@click="changeFormat"style="width: 2cm">打印</el-button><el-buttontype="warning"plainicon="el-icon-d-arrow-left"@click="cancelPrint">返回</el-button></el-form-item></el-form></el-dialog><!--endprint-->

vue使用v-print-nb插件实现A4纸张排版打印相关推荐

python自动排版 html_Python 实现自动完成A4标签排版打印功能
老婆大人让俺帮她通过Excel生成百人的准考证,她们学校打算来一次高考模拟.由于高考改革,每个学生的考试科目不一样,需要自动生成一下. 我一个程序员平时很少用到Excel,自己也不打算深入研究这个软件 ...
python标签打印_Python 实现自动完成A4标签排版打印功能
老婆大人让俺帮她通过Excel生成百人的准考证,她们学校打算来一次高考模拟.由于高考改革,每个学生的考试科目不一样,需要自动生成一下. 我一个程序员平时很少用到Excel,自己也不打算深入研究这个软件 ...
A4纸张两面打印、每面打印2页的打印机设置
A4纸张两面打印.每面打印2页的打印机设置 1.打开文档,点击打印按钮 2.打印机打印设置 3.打印机属性设置 4.点击打印,开始打印文档 5.小结,作者也是通过多次操作尝试才成功的,希望这篇博客对你 ...
如何用A4纸排版打印并制作成四分之一大小的册子（简易说明书）
如何用A4纸排版打印并制作成四分之一大小的册子(简易说明书)? 1.打开要制作成小册子的文档,最好是word格式: 2.菜单栏选择"文件"-打印,弹出"打印"对 ...
A4 纸张上打印预览
以下是一个简单的示例,演示如何使用 VC++2012 在 A4 纸张上打印预览从上到下排列的 3 张照片,每张照片下方显示文件名. 首先,需要在 DialogNameDlg.h 文件中添加以下 inc ...
vue项目使用Print.js插件实现PDF文件打印
一,Print.js介绍 Print.js主要是为了帮助我们在应用程序中直接打印PDF文件,而不需要离开界面,也不需要使用嵌入.对于用户不需要打开或下载PDF文件的特殊情况,只需要打印即可. 例如,当 ...
【打印PPT】如何打印PPT？如何打印PPT到1张纸上？PPT大于A4纸张如何打印？
碰到打印PPT然后打出来发现A4纸装不下怎么办?
Vue -print - nb 打印插件使用详解以及连打操作
Vue -print - nb 打印插件 #安装 npm install vue-print-nb --save #在main.js 全局引用 import Print from 'vue-print ...
Vue Devtools安装（谷歌浏览器插件：）
vue安装: # 最新稳定版 $ npm install vue # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新 ...

vue使用v-print-nb插件实现A4纸张排版打印

vue使用v-print-nb插件实现A4纸张排版打印相关推荐

最新文章

热门文章