码迷,mamicode.com
首页 > Web开发 > 详细

html转pdf/vue中导出pdf

时间:2020-05-06 20:02:53      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:nload   联系   beef   -o   into   center   let   ble   mat   

一,组件,需要转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

标签:nload   联系   beef   -o   into   center   let   ble   mat   

原文地址:https://www.cnblogs.com/shuihanxiao/p/12838334.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!