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