标签:nload 联系 beef -o into center let ble mat
一,组件,需要转pdf下载的的html
<template> <div id="faceCtx"> <el-row class="face-add-border"> <el-col :span="8" class="face-col-left"> <div class="grid-content bg-purple"> <div class="printOrder" v-for="(v,k) in codeList"> <barcode :value="v.barcodes" :options="barcode_option" tag="svg" ></barcode> </div> </div> </el-col> <el-col :span="8" class="face-col-center"> <div class="grid-content bg-purple-light face-title">采购订单</div> </el-col> <el-col :span="8" class="face-col-right"> <div class="grid-content bg-purple face-logo"> <img src="../../../assets/404_images/jd_world_logo.png"/> </div> </el-col> </el-row> <!-- <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark face-tips">(此传真件与原件具有同等法律效力)</div></el-col> </el-row> --> <el-row> <el-col :span="12"><div class="grid-content bg-purple-dark">采购方:{{faceResult.fromWarehouseName}}</div></el-col> <el-col :span="12"><div class="grid-content bg-purple-dark">订购单号:{{faceResult.orderSn}}</div></el-col> </el-row> <el-row> <el-col :span="12"><div class="grid-content bg-purple-dark">联系人:{{faceResult.mobile}}</div></el-col> <el-col :span="12"><div class="grid-content bg-purple-dark">订购日期:{{faceResult.contacter}}</div></el-col> </el-row> <el-row> <el-col :span="12"><div class="grid-content bg-purple-dark">电话:{{faceResult.distributionPlace}}</div></el-col> <el-col :span="12"><div class="grid-content bg-purple-dark">供应商:{{faceResult.distributionPlace}}</div></el-col> </el-row> <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> <el-col :span="24"><div class="grid-content bg-purple-dark" style="float:right">单位:人民币</div></el-col> </el-row> <div> <table class="face-table"> <thead> <tr> <th>序号</th> <th>货品名称</th> <th>规格/型号</th> <th>单位</th> <th>数量</th> <th>含税单价</th> <th>含税总价</th> </tr> </thead> <tbody> <tr v-for="item in faceResult.detailList"> <td>{{item.materialSn}}</td> <td>{{item.materialName}}</td> <td>{{item.boxSpecification}}</td> <td>{{item.quantity}}</td> <td>{{item.materialName}}</td> <td>{{item.boxSpecification}}</td> <td>{{item.quantity}}</td> </tr> <tr class="add-padding"> <td>货款总金额(大写)</td> <td colspan="6">{{faceResult.totalQuantity}}</td> </tr> </tbody> </table> </div> <el-row> <el-col :span="12"><div class="grid-content bg-purple-dark">说明:</div></el-col> </el-row> <el-row> <el-col :span="12"><div class="grid-content bg-purple-dark">一 交货日期:{{faceResult.orderSn}}</div></el-col> <el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row> <el-col :span="12"><div class="grid-content bg-purple-dark">一 交货地址:{{faceResult.orderSn}}</div></el-col> <el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row style="margin-top:20px"> <el-col :span="12"><div class="grid-content bg-purple-dark">采购方(盖章):</div></el-col> <el-col :span="12"><div class="grid-content bg-purple-dark">供应商(盖章):</div></el-col> </el-row> <el-row> <el-col :span="12"><div class="grid-content bg-purple-dark">日期:</div></el-col> <el-col :span="12"><div class="grid-content bg-purple-dark">日期:</div></el-col> </el-row> </div> </template> <script> export default { props:[‘faceResult‘], data() { return { barcode_option: { displayValue: true, //是否默认显示条形码数据 //textPosition :‘top‘, //条形码数据显示的位置 background: ‘#fff‘, //条形码背景颜色 valid: function (valid) { console.log(valid) }, width:‘1px‘,//单个条形码的宽度 height: ‘40px‘, fontSize: ‘14px‘ //字体大小 }, codeList: [{barcodes: ‘‘}] } }, methods: { fnGetOrderSn(faceSn) { console.log(faceSn); this.codeList = []; this.codeList.push({ barcodes: faceSn }) } }, mounted() { }, } </script> <style lang="scss" scoped> #faceCtx { width: 670px; padding: 0 20px; font-size: 14px; position: absolute; top: 5px; left: 20px; right: 20px; z-index: -20; -webkit-box-sizing: border-box; box-sizing: border-box; } #faceCtx .face-title { padding-top: 25px; font-size: 18px; font-weight: bold; text-align: center; } #faceCtx .face-logo { padding-top: 8px; } #faceCtx .face-add-border { border-bottom: 1px solid #ebeef5; } #faceCtx .face-tips { text-align: center; padding: 10px; } #faceCtx .grid-content { padding-bottom: 5px; } #faceCtx .face-table{ width: 100%; } #faceCtx .el-table td,#faceCtx .el-table th { padding: 0px; } #faceCtx .face-table, #faceCtx .face-table th, #faceCtx .face-table td { border: 1px solid #ebeef5; border-collapse: collapse; text-align: center; } #faceCtx .face-table th { font-weight: normal; padding: 2px; background-color: #f1f1f1; } #faceCtx .face-table td { padding: 2px; } #faceCtx .add-padding td { padding: 20px 0; } #faceCtx .face-col-left { text-align: left; } #faceCtx .face-col-center { text-align: center; } #faceCtx .face-col-right { text-align: right; } </style>
二,引入组件
<face-order :faceResult="faceResult" ref="fnFaceChild"></face-order> import FACEORDER from ‘./faceOrder.vue‘ //引入组件 data中this.faceResult 调用后台接口获取显示数据 fnFacePrint(index, row) { console.log(row) let orderSn = row.orderSn; this.loading = true; fnGetOutFacePrint(orderSn) .then(res => { this.loading = false; console.log(res); if (res.code == 200) { this.faceResult = res.data; this.$refs.fnFaceChild.fnGetOrderSn(res.data.orderSn); document.querySelector(‘#faceCtx‘).style.left = ‘20px‘; document.querySelector(‘#faceCtx‘).style.minHeight = ‘800px‘; setTimeout( () => { //导出PDF console.log(this.faceResult) htmlToPdf.downloadPDF( document.querySelector(‘#faceCtx‘),‘导出面单‘); }, 1000) } }) .catch(err => {}); },
标签:nload 联系 beef -o into center let ble mat
原文地址:https://www.cnblogs.com/shuihanxiao/p/12838334.html