入库管理打印物品详情

index.html

@@ -253,5 +253,5 @@
   <script src="https://cdn.bootcss.com/babel-polyfill/7.6.0/polyfill.js"></script>
   <script src="./static/tinymce4.7.5/tinymce.min.js"></script>
   <script src="print.js"></script>
-  <link rel="stylesheet" type="text/css" href="print.css">
+  <link rel="stylesheet" type="text/css" href="print.css" >
 </html>

src/views/inv/PrintDetail.vue

 
 <template>
-  <div class="app-container" >
+  <div class="app-container">
     <!-- 搜索栏 -->
     <el-card class="filter-container"
              shadow="never">
-      <div id="printJS-form">
-        <el-form :model="formData" >
+      <div  ref="printTable" class="content">
+        <el-form :model="formData" id="printJS-form">
           <el-table
             :data="formData.tableData"
             ref="formData"
             class="print_table">
             <el-table-column
               prop="goodsName"
-              label="物品名称">
+              label="物品名称"
+              align="left"
+            >
             </el-table-column>
             <el-table-column
               prop="goodsNo"
@@ -72,8 +74,20 @@ export default {
       this.$router.go(-1);//返回上一层
     },
     print(){
-      // this.$print(this.$refs.formData)
-      printJS({ printable: 'printJS-form', type: 'html', documentTitle: '入库物品详情' })
+      printJS({
+        printable: this.formData.tableData,
+        documentTitle: '物品详情',
+        properties: [
+          {field:'goodsName',displayName: '物品名称'},
+          {field: 'goodsNo',displayName: '型号'},
+          {field:'categoryName',displayName: '物品类别'},
+          {field: 'inboundNum',displayName: '数量'},
+          {field: 'price',displayName: '价格（元）'},
+          {field: 'supplierName',displayName: '供应商'}],
+        type: 'json',
+        gridHeaderStyle: 'color: red;  border: 2px solid #3971A5;',
+        gridStyle: 'border: 2px solid #3971A5;padding: 10px;text-align:center;'
+      })
     }
   }
 }
@@ -81,19 +95,11 @@ export default {
 
 <style lang='scss' scoped>
 .app-container{
-  width: 70%;
-  margin: 0 auto;
-  @media print {
   width: 100%;
-    text-align: center;
-    page-break-after: always;
-    .print_table{
-      width:100%;
-      text-align: center;
-    }
-  }
+  margin: 0 auto;
   .print_table{
-    width:100%;
+    width: 70%;
+    margin: 0 auto;
   }
   .print_btn{
     margin: 50px 0;