新增模板导出

src/components/MyPrint/MyPrint.vue

@@ -1,12 +1,17 @@
 <template>
   <div>
     <el-dialog v-model="visible" :title="props.title" :width="props.width">
-      <div class="printCode">
-        <div v-html="props.html"></div>
-      </div>
+      <template v-if="visible">
+        <div class="printCode" ref="printNodeRef">
+          <div v-html="props.html"></div>
+        </div>
+      </template>
 
       <div class="flex-c-c mt10">
-        <el-button type="primary" @click="handleClose"> 关 闭 </el-button>
+        <el-button @click="handleClose" icon="CircleClose"> 关 闭 </el-button>
+        <el-button type="primary" v-if="props.isShowExport" @click="handleExport" icon="Download">
+          导 出
+        </el-button>
         <el-button type="primary" @click="printTemplate" icon="Printer"> 打 印 </el-button>
       </div>
     </el-dialog>
@@ -14,8 +19,11 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, computed } from 'vue';
+import { defineProps, computed, ref } from 'vue';
 import print from '@/utils/print';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { getObjType } from '@/utils/util';
+import * as XLSX from 'xlsx';
 
 const props = defineProps({
   html: {
@@ -34,6 +42,10 @@ const props = defineProps({
     type: String,
     default: '二维码',
   },
+  isShowExport: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const $emit = defineEmits(['update:modelValue']);
@@ -49,6 +61,84 @@ const handleClose = () => {
   visible.value = false;
 };
 
+const printNodeRef = ref();
+
+/** 生成Excel */
+const createExcel = () => {
+  // const table = this.$refs.tableRef;
+
+  /* 将表格转换为 Workbook 对象 */
+  const wb = XLSX.utils.table_to_book(printNodeRef.value);
+
+  console.log('wb :>> ', wb);
+
+  wb.Sheets.Sheet1;
+
+  //单元格外侧框线
+  const borderAll = {
+    top: {
+      style: 'thin',
+    },
+    bottom: {
+      style: 'thin',
+    },
+    left: {
+      style: 'thin',
+    },
+    right: {
+      style: 'thin',
+    },
+  };
+
+  for (const key in wb.Sheets.Sheet1) {
+    const item = wb.Sheets.Sheet1[key];
+
+    const type = getObjType(item);
+
+    console.log('type :>> ', type);
+
+    if (type !== 'object') continue;
+
+    item.s = {
+      border: borderAll,
+      font: {
+        // name: "微软雅黑",
+        // sz: 16,
+        color: { rgb: '000000' },
+        bold: true,
+        italic: false,
+        underline: false,
+      },
+      fill: {
+        fgColor: { rgb: 'C5D9F1' },
+      },
+      alignment: {
+        horizontal: 'center',
+        vertical: 'center',
+        wrapText: false, // 自动换行
+      },
+    };
+  }
+
+  /* 导出 Workbook 到 Excel 文件 */
+  XLSX.writeFile(wb, 'data.xlsx');
+};
+
+/** 导出 */
+const handleExport = () => {
+  if (!printNodeRef.value) return ElMessage.warning('数据暂未请求完成, 请稍等');
+
+  ElMessageBox.confirm('确认导出?', '', {
+    confirmButtonText: '确认',
+    cancelButtonText: '关闭',
+    type: 'warning',
+  }).then(() => {
+    // 确认导出
+    createExcel();
+  });
+};
+
+/** 打印 */
 const printTemplate = () => {
   const printNode = document.querySelectorAll('.printCode > div > div');
   console.log('printNode :>> ', printNode);

src/views/distribution/deliverylist/distributionDeliveryListmar.vue

@@ -164,27 +164,22 @@
       </div>
 
       <!-- 打印模块 -->
-      <el-dialog title="二维码" :visible.sync="isShow" width="70%" v-model="isShow">
+      <!-- <el-dialog title="二维码" :visible.sync="isShow" width="70%" v-model="isShow">
         <div>
           <div v-html="html"></div>
-
-          <!-- <div v-for="(item,index) in qrCodeObj">
-                      <el-row>
-                        <el-col :span="24" >
-                          <el-image  width="10" height="10" w-full  :key="index" :src="item " alt="Preview Image"/>
-                        </el-col>
-                      </el-row>
-                    </div> -->
         </div>
         <span slot="footer" class="dialog-footer">
-          <!--    <el-button type="primary" @click="ddd">导 出</el-button>-->
           <el-button type="primary" @click="printTemplate">打 印</el-button>
           <el-button type="primary" @click="isShow = false">确 定</el-button>
           <el-button @click="isShow = false">取 消</el-button>
         </span>
-      </el-dialog>
+      </el-dialog> -->
     </div>
   </basic-container>
+
+  <!-- 打印 -->
+  <MyPrint v-model="isShow" width="70%" :html="html"></MyPrint>
+
   <edittablehead
     @setcolum="setnewcolum"
     @closce="showdrawer"
@@ -1090,8 +1085,8 @@ export default {
         path: '/distribution/deliverylist/distributionDeliveryListedt',
         query: {
           data: encodeURIComponent(JSON.stringify(row)),
-          state:'imgType',
-        name: row.trainNumber + '-查看配送',
+          state: 'imgType',
+          name: row.trainNumber + '-查看配送',
         },
       });
     },