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)
                },
                '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 {
   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{
     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 => {});
    },