打印组件

src/views/modules/check/ibc-export.vue

@@ -2,56 +2,59 @@
   <div>
     <el-dialog
       title="导出"
-      width="70%"
+      width="60%"
       :close-on-click-modal="false"
       :visible.sync="visible">
-      <div class="my-table" id="printContent" style="padding-top: 55px;background-color:#fff;">
+      <div class="my-table" id="printDiv" style="padding:55px 30px 0 30px;background-color:#fff;">
         <h1 style="text-align: center">入  厂  检  验  报  告</h1>
-        <h4 style="text-align: right;margin-right: 100px;margin-top: 40px">编号： {{dataForm.inspectionCode}}</h4>
+        <h4 style="text-align: right;margin-right: 20px;margin-top: 40px">编号： {{dataForm.inspectionCode}}</h4>
         <!-- border="1" -->
         <table class="table-first" align="center" cellpadding="8" cellspacing="0" border="1"
                style="margin-top: 10px;font-family: SimSun,serif;font-size: medium;text-align: center;border-width: 1px 1px 0 0;">
           <tbody align="center">
           <tr>
-            <th style="width: 100px">供方单位</th>
-            <td style="width: 250px" colspan="1" rowspan="1">{{dataForm.source}}</td>
-            <th style="width: 100px">批次号</th>
-            <td style="width: 400px" colspan="1" rowspan="1">{{dataForm.batchNumber}}</td>
+            <th style="width: 15%">供方单位</th>
+            <td style="width: 30%">{{dataForm.source}}</td>
+            <th style="width: 15%">批次号</th>
+            <td style="width: 40%">{{dataForm.batchNumber}}</td>
           </tr>
           <tr>
-            <th style="width: 100px">产品名称</th>
-            <td style="width: 250px" colspan="1" rowspan="1">{{dataForm.materialName}}</td>
-            <th style="width: 100px">产品图号</th>
-            <td style="width: 400px" colspan="1" rowspan="1">{{dataForm.specifications}}</td>
+            <th style="width: 15%">产品名称</th>
+            <td style="width: 30%">{{dataForm.materialName}}</td>
+            <th style="width: 15%">产品图号</th>
+            <td style="width: 40%">{{dataForm.specifications}}</td>
           </tr>
           <tr>
-            <th style="width: 100px">来料类型</th>
-            <td colspan="3" align="left" style="width: 750px">
+            <th style="width: 15%">来料类型</th>
+            <td colspan="3" align="left">
               <el-checkbox-group v-model="idsMaterial">
                 <!-- :style="item.id === 1?'margin-left: 30px':''" -->
-                <el-checkbox class="my-cb"  v-for="(item,i) in optionsMaterial" :label="item.code" :key="item.code"><span style="color: #404040">{{item.value}}</span></el-checkbox>
+                <el-checkbox disabled class="my-cb"  v-for="(item,i) in optionsMaterial" :label="item.code" :key="item.code"><span style="color: #404040">{{item.value}}</span></el-checkbox>
               </el-checkbox-group>
             </td>
           </tr>
           <tr>
-            <th style="width: 100px">检验设备（勾选）</th>
-            <td colspan="3" align="left" style="width: 750px">
+            <th style="width: 15%">
+              检验设备
+              （勾选）
+            </th>
+            <td colspan="3" align="left">
               {{dataForm.detectionEquipment}}
             </td>
           </tr>
           </tbody>
         </table>
         <table class="table-data-list" align="center" cellpadding="8" cellspacing="0" border="1"
-               style="font-family: SimSun,serif;font-size: medium;text-align: center;border-width: 0 1px 0 0">
+               style="width:100%;font-family: SimSun,serif;font-size: medium;text-align: center;border-width: 0 1px 0 0">
           <thead>
           <tr>
-            <th style="width: 100px">序号</th>
-            <th style="width: 150px">检验项目</th>
+            <th style="width: 50px">序号</th>
+            <th style="width: 100px">检验项目</th>
             <th style="width: 100px">技术指标</th>
             <th style="width: 100px">实测记录</th>
             <th style="width: 100px">交检数</th>
             <th style="width: 100px">合格数</th>
-            <th style="width: 200px">备注</th>
+            <th style="width: auto">备注</th>
           </tr>
           </thead>
           <tbody align="center">
@@ -72,14 +75,14 @@
           <tr>
             <th colspan="4" style="width: 850px; text-align: left">检验结论：</th>
           </tr>
-          <tr style="height: 200px">
+          <tr>
             <td>{{dataForm.conclusion}}</td>
           </tr>
           <tr>
             <th style="width: 100px">检验员：</th>
             <td style="width: 400px">{{dataForm.creatorName}}</td>
             <th style="width: 80px">审核：</th>
-            <td style="width: 250px">梁瑞伟</td>
+            <td colspan="0">梁瑞伟</td>
           </tr>
           </tbody>
         </table>
@@ -87,7 +90,7 @@
       <span slot="footer" class="dialog-footer">
         <el-button @click="visible = false">取消</el-button>
 <!--        <el-button type="primary" v-on:click="getPdf()">导出</el-button>-->
-        <el-button type="primary" v-print="'#printContent'">导出</el-button>
+        <el-button type="primary" v-print="printObj">导出</el-button>
       </span>
     </el-dialog>
   </div>
@@ -99,6 +102,11 @@
     name: 'ibc-export',
     data () {
       return {
+        printObj: {
+          id: 'printDiv',
+          popTitle: '-',
+          extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>'
+        },
         htmlTitle: '入厂检验报告',
         visible: false,
         dataForm: {},
@@ -143,20 +151,26 @@
 </script>
 
 <style scoped>
-  .my-cb{
-    width: 90px;
-    font-family: SimSun,serif;
-    font-size: large;
+  @page{
+    size:  auto;   /* auto is the initial value */
+    margin: 3mm;  /* this affects the margin in the printer settings */
+  }
+
+  html{
+    background-color: #FFFFFF;
+    margin: 0;  /* this affects the margin on the html before sending to printer */
+  }
+
+  body{
+    border: solid 1px blue ;
+    margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
   }
+
   .table-first td, .table-first th, .table-data-list th, .table-data-list td{
     border-color: grey;
     border-width: 0 0 1px 1px;
   }
-  .table-conclusion td{
-    border-color: grey;
-    border-width: 0;
-  }
-  .table-conclusion th{
+  .table-conclusion td, .table-conclusion th{
     border-color: grey;
     border-width: 0;
   }