html转pdf/vue中导出pdf
标签：nload 联系 beef -o into center let ble mat
一，组件，需要转pdf下载的的html
"
faceCtx">
class="face-add-border">
"8" class="face-col-left">
class=
"grid-content bg-purple">
class="printOrder" v-for="(v,k) in codeList">
"v.barcodes" :options="barcode_option" tag="svg" >
class="grid-content bg-purple-light face-title">采购订单
"8" class="face-col-right">
class=
"grid-content bg-purple face-logo">
"
../../../assets/404_images/jd_world_logo.png"/>
class="grid-content bg-purple-dark">采购方：{{faceResult.fromWarehouseName}}
"12">class="grid-content bg-purple-dark">订购单号：{{faceResult.orderSn}}
"12">class="grid-content bg-purple-dark">联系人：{{faceResult.mobile}}
"12">class="grid-content bg-purple-dark">订购日期：{{faceResult.contacter}}
"12">class="grid-content bg-purple-dark">电话：{{faceResult.distributionPlace}}
"12">class="grid-content bg-purple-dark">供应商：{{faceResult.distributionPlace}}
"24">class="grid-content bg-purple-dark">
"24">class="grid-content bg-purple-dark" style="float:right">单位：人民币
class="face-table">
| 序号 |
货品名称 |
规格/型号 |
单位 |
数量 |
含税单价 |
含税总价 |
for="item in faceResult.detailList">
| {{item.materialSn}} |
{{item.materialName}} |
{{item.boxSpecification}} |
{{item.quantity}} |
{{item.materialName}} |
{{item.boxSpecification}} |
{{item.quantity}} |
class="add-padding">
| 货款总金额（大写） |
"6">{{faceResult.totalQuantity}} |
"12">class="grid-content bg-purple-dark">说明：
"12">class="grid-content bg-purple-dark">一 交货日期：{{faceResult.orderSn}}
"12">class="grid-content bg-purple-dark">
"12">class="grid-content bg-purple-dark">一 交货地址：{{faceResult.orderSn}}
"12">class="grid-content bg-purple-dark">
"margin-top:20px">
"12">class="grid-content bg-purple-dark">采购方（盖章）：
"12">class="grid-content bg-purple-dark">供应商（盖章）：
"12">class="grid-content bg-purple-dark">日期：
"12">class="grid-content bg-purple-dark">日期：
二，引入组件
"faceResult" ref="fnFaceChild">
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
标签：nload 联系 beef -o into center let ble mat
原文地址：https://www.cnblogs.com/shuihanxiao/p/12838334.html
评论