html转pdf/vue中导出pdf
一，组件，需要转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 => {});
},
以上是 html转pdf/vue中导出pdf 的全部内容， 来源链接： utcz.com/z/379175.html
