店铺d端打印机打印模板

package.json

@@ -58,7 +58,8 @@
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
-    "wangeditor": "^4.7.5"
+    "wangeditor": "^4.7.5",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

src/api/store/storeOrder.js

@@ -210,3 +210,14 @@ export function getCommentInfo(id) {
     method: 'get'
   })
 }
+
+export function downloadOrderExcel(id) {
+  return request({
+    url: `/store/storeOrder/downloadExcel/${id}`,
+    method: 'get',
+    responseType: 'blob', // 重要：告诉axios返回Blob类型
+    headers: {
+      'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    }
+  });
+}

src/views/store/storeOrder/index.vue

@@ -188,7 +188,12 @@
           >查看
           </el-button>
 
-
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handlePreviewPrintOrder(scope.row)"
+          >预览打印</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -239,6 +244,35 @@
         <el-button @click="upload.open = false">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 新增：Excel预览打印弹窗 -->
+    <el-dialog
+      title="订单Excel预览打印"
+      :visible.sync="previewExcelOpen"
+      width="90%"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <div v-loading="previewLoading" class="excel-preview-container">
+        <!-- Excel预览表格 -->
+        <div v-if="previewExcelData.length > 0" class="excel-preview-content">
+          <table class="excel-table" border="1" cellpadding="5" cellspacing="0">
+            <tbody>
+            <tr v-for="(row, rowIndex) in previewExcelData" :key="rowIndex">
+              <td v-for="(cell, colIndex) in row" :key="colIndex" :style="{ minWidth: '120px' }">
+                {{ cell || '' }}
+              </td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+        <div v-else-if="!previewLoading" class="empty-tip">暂无预览数据</div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="previewExcelOpen = false">关闭</el-button>
+        <el-button type="primary" @click="printExcelContent">打印</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -250,7 +284,7 @@ import {
   addOrder,
   updateOrder,
   exportOrder,
-  importTemplate
+  importTemplate, downloadOrderExcel
 } from '@/api/store/storeOrder'
 import storeOrderDetails from '../../components/store/storeOrderDetails.vue'
 import { getToken } from '@/utils/auth'
@@ -261,6 +295,9 @@ export default {
   components: { storeOrderDetails },
   data() {
     return {
+      previewExcelOpen: false, // 预览弹窗是否打开
+      previewExcelData: [],    // 解析后的Excel数据
+      previewLoading: false,   // 预览加载状态
       isExport: false,
       actName: '10',
       show: {
@@ -675,7 +712,147 @@ export default {
         this.exportLoading = false
       }).catch(() => {
       })
-    }
+    },
+
+    /** 新增：预览并打印订单Excel */
+    handlePreviewPrintOrder(row) {
+      this.previewLoading = true;
+      this.previewExcelData = [];
+      downloadOrderExcel(row.id)
+        .then(response => {
+          if (response instanceof Blob) return response.arrayBuffer();
+          throw new Error('响应不是Excel文件格式');
+        })
+        .then(arrayBuffer => {
+          const XLSX = require('xlsx');
+          const workbook = XLSX.read(arrayBuffer, { type: 'array' });
+          const sheetName = workbook.SheetNames[0];
+          const worksheet = workbook.Sheets[sheetName];
+          const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1:A1');
+          const excelData = [];
+
+          for (let row = 0; row <= range.e.r; row++) {
+            const rowData = [];
+            let isRowEmpty = true;
+            for (let col = 0; col <= range.e.c; col++) {
+              const cell = worksheet[XLSX.utils.encode_cell({ r: row, c: col })];
+              const cellValue = cell ? cell.v : '';
+              rowData.push(cellValue);
+              if (cellValue !== '' && cellValue !== null && cellValue !== undefined) {
+                isRowEmpty = false;
+              }
+            }
+            if (!isRowEmpty) {
+              if (rowData.some(item => item.includes('销售退款明细单'))) {
+                excelData.push(['' +
+                '', '' +
+                '']);
+                excelData.push(rowData);
+              } else {
+                excelData.push(rowData);
+              }
+            }
+          }
+
+          this.previewExcelData = excelData;
+          this.previewExcelOpen = true;
+        })
+        .catch(error => {
+          console.error('预览Excel失败:', error);
+          this.$message.error(`预览失败：${error.message || '请重试'}`);
+        })
+        .finally(() => {
+          this.previewLoading = false;
+        });
+    },
+
+    /** 新增：打印预览的Excel内容 */
+    printExcelContent() {
+      if (this.previewExcelData.length === 0) {
+        this.$message.warning('暂无可打印的数据');
+        return;
+      }
+      // 1. 创建新打印窗口
+      const printWindow = window.open('', '_blank');
+      if (!printWindow) {
+        this.$message.warning('浏览器弹窗被拦截，请允许弹窗后重试');
+        return;
+      }
+
+      // 2. 构建打印页面的HTML
+      printWindow.document.write(`
+      <!DOCTYPE html>
+      <html>
+      <head>
+        <meta charset="UTF-8">
+        <title>订单详情打印</title>
+        <style>
+          table { border-collapse: collapse; width: 100%; margin: 20px 0; }
+          td { border: 1px solid #000; padding: 8px; min-width: 120px; text-align: center; }
+          h3 { text-align: center; }
+        </style>
+      </head>
+      <body>
+        <h3>订单详情</h3>
+        <table>
+          <tbody>
+            ${this.previewExcelData.map(row => `
+              <tr>
+                ${row.map(cell => `<td>${cell || ''}</td>`).join('')}
+              </tr>
+            `).join('')}
+          </tbody>
+        </table>
+      </body>
+      </html>
+    `);
+      printWindow.document.close();
+      printWindow.print();
+      printWindow.onafterprint = () => printWindow.close();
+    },
   }
 }
 </script>
+<style>
+/* 新增：Excel预览样式 */
+.excel-preview-container {
+  padding: 10px;
+  max-height: 600px;
+  overflow: auto;
+
+  .excel-table {
+    width: 100%;
+    border-collapse: collapse;
+
+    td {
+      border: 1px solid #e6e6e6;
+      padding: 8px;
+      text-align: center;
+    }
+  }
+
+  .empty-tip {
+    text-align: center;
+    padding: 20px;
+    color: #999;
+  }
+}
+</style>
+
+<style>
+@media print {
+  body * {
+    visibility: hidden;
+  }
+  .print-content, .print-content * {
+    visibility: visible;
+  }
+  .print-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 20px;
+    width: 100%;
+  }
+}
+</style>