pc_shop_site/components/PdfHtml.vue

<template>
  <div ref="printArea" style="font-family: ProximaNova-Semibold;">
    <table>
      <tr>
        <td>
          <img :src="comInfo.image" style="width: 300px;height: 300px;margin-right: 14px;">
        </td>
        <td style="vertical-align: top;">
          <p  style="font-weight: bold;font-size: 22px;padding-bottom: 24px;color:#00213B">
            <span style="margin-right: 5px;">{{pageData.product_code}}</span>
            <span>{{pageData.product_name}}</span>
          </p>
          <p style="line-height: 20px;color:#00213B;font-size: 14px;">{{comInfo.description}}</p>
        </td>
      </tr>
    </table>
    <div>
      <p style="font-weight: bold;font-size: 17px;margin: 40px 0 10px;color:#00213B">Specifications</p>
        <table style="width:100%;border-collapse: collapse;font-size: 14px;table-layout: fixed;text-align:center;">
          <tr style="background-color: #F7F8FC;">
            <td v-for="(item,key) in tabColumns" :key="key" style="font-weight: bold;padding:15px 0;color:#00213B;width: 25%;font-size: 14px;border-bottom:1px solid #EFEFEF">{{item.label}}</td>
          </tr>
          <tr style="padding:10px 0;">
            <td style="padding:15px 0;color:#00213B;border-bottom:1px solid #EFEFEF">{{specificationsObj.time}}</td>
            <td style="padding:15px 0;color:#00213B;border-bottom:1px solid #EFEFEF">{{specificationsObj.model}}</td>
            <td style="padding:15px 0;color:#00213B;border-bottom:1px solid #EFEFEF">
              <div v-for="(item,idx) in specificationsObj.decorationArr" :key="idx" style="padding-bottom:4px;">{{item}}</div>
            </td>
            <td style="padding:14px 0;color:#00213B;border-bottom:1px solid #EFEFEF">
              <div v-for="(item,idx) in specificationsObj.addonArr" :key="idx" style="padding-bottom:4px;">{{item}}</div>
            </td>
          </tr>
      </table>
    </div>
    <div>
      <p style="font-weight: bold;font-size: 17px;margin: 40px 0 10px;color:#00213B">Quote</p>
      <table style="width:100%;border-collapse: collapse;font-size: 14px;table-layout: fixed;text-align:center;">
          <tr style="background-color: #F7F8FC;font-weight: bold;">
            <td v-for="(item,key) in tableColumns" :key="key" style="font-weight: bold;padding:15px 0;color:#00213B;border-bottom:1px solid #EFEFEF" :style="{width:width}">{{item.label}}</td>
          </tr>
          <tr style="padding:10px 0;" v-for="(items,key) in tableData" :key="key">
            <td style="padding:15px 0;color:#00213B;border-bottom:1px solid #EFEFEF;font-weight: bold;">{{items.project}}</td>
            <td style="padding:15px 0;color:#00213B;border-bottom:1px solid #EFEFEF">{{items.website_qty1}}</td>
            <td style="padding:15px 0;color:#00213B;border-bottom:1px solid #EFEFEF" v-if="items.website_qty2==0 || items.website_qty2">{{items.website_qty2}}</td>
            <td style="padding:15px 0;color:#00213B;border-bottom:1px solid #EFEFEF" v-if="items.website_qty3==0 || items.website_qty3">{{items.website_qty3}}</td>
            <td style="padding:15px 0;color:#00213B;border-bottom:1px solid #EFEFEF" v-if="items.website_qty4==0 || items.website_qty4">{{items.website_qty4}}</td>
            <td style="padding:15px 0;color:#00213B;border-bottom:1px solid #EFEFEF" v-if="items.website_qty5==0 || items.website_qty5">{{items.website_qty5}}</td>
            <td style="padding:15px 0;color:#00213B;border-bottom:1px solid #EFEFEF" v-if="items.website_qty6==0 || items.website_qty6">{{items.website_qty6}}</td>
            <td style="padding:15px 0;color:#00213B;border-bottom:1px solid #EFEFEF" v-if="items.website_qty7==0 || items.website_qty7">{{items.website_qty7}}</td>
            <td style="padding:15px 0;color:#00213B;border-bottom:1px solid #EFEFEF" v-if="items.website_qty8==0 || items.website_qty8">{{items.website_qty8}}</td>
          </tr>
        </table>
    </div>
    <div v-if="emailForm.Comments"  style="color:#00213B">
      <p style="font-weight: bold;font-size: 17px;margin: 40px 0 2px;">Comment</p>
      <p style="text-indent:2em;">{{emailForm.Comments}}</p>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    pageData: {
      type: Object,
      default: {},
    },
    specificationsObj: {
      type: Object,
      default: {},
    },
    tableData: {
      type: Array,
      default: [],
    },
    tableColumns: {
      type: Array,
      default: [],
    },
    emailForm:{
      type: Object,
      default: {},
    }
  },
  data(){
    return {
      tabColumns: [
        {
          label: "LeadTime",
          prop: "time",
          type: "pre"   //去掉$符号
        },
        {
          label: "Model",
          prop: "model",
          type: "pre"   //去掉$符号
        },
        {
          label: "Decoration",
          prop: "decoration",
          type: "pre"   //去掉$符号
        },
        {
          label: "Addon",
          prop: "addon",
          type: "pre"   //去掉$符号
        },
      ],
    }
  },
  computed:{
    comInfo(){
			return this.pageData?.main
		},
    width(){
      return 100/this.tableColumns.length + '%'
    }
  },
  mounted(){
  },
  methods: {
   },
};
</script>

<style lang="scss" scoped>
table {
    page-break-inside:avoid;
    position:relative;
}
</style>