vue将html转换成pdf,html转pdf/vue中导出pdf(示例代码)

采购订单

采购方：{{faceResult.fromWarehouseName}}

订购单号：{{faceResult.orderSn}}

联系人：{{faceResult.mobile}}

订购日期：{{faceResult.contacter}}

电话：{{faceResult.distributionPlace}}

供应商：{{faceResult.distributionPlace}}

单位：人民币

序号货品名称规格/型号单位数量含税单价含税总价

{{item.materialSn}}{{item.materialName}}{{item.boxSpecification}}{{item.quantity}}{{item.materialName}}{{item.boxSpecification}}{{item.quantity}}货款总金额(大写){{faceResult.totalQuantity}}

说明：

一 交货日期：{{faceResult.orderSn}}

一 交货地址：{{faceResult.orderSn}}

采购方(盖章)：

供应商(盖章)：

日期：

日期：

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() {

},

}

width: 670px;

padding:020px;

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: 20px0;

}

#faceCtx .face-col-left {

text-align: left;

}

#faceCtx .face-col-center {

text-align: center;

}

#faceCtx .face-col-right {

text-align: right;

}