当前位置： 首页 > news >正文

抽屉打印公共组件想要实现的打印预览样式效果

news 2025/6/29 12:04:57

样式效果

主要是实现阴影效果

box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

参考代码：

PrintTemplateReagent01.vue

<script setup lang="ts" name="PrintTemplateReagent01">
import { inject, ref, onMounted, nextTick } from "vue";const injectData = inject("printData", ref([]));
const printData = ref<any[]>([]);onMounted(() => {printData.value = injectData.value;
});// 打印函数
const printDocument = () => {nextTick(() => {// 创建打印专用窗口const printWindow = window.open("", "_blank");// 获取当前时间const now = new Date();const printTime = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, "0")}-${now.getDate().toString().padStart(2, "0")} ${now.getHours().toString().padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}`;// 构建打印内容printWindow?.document.write(`<!DOCTYPE html><html><head><meta charset="UTF-8"><title>试剂清单打印</title><style>/* 全局打印样式 */body { margin: 0; padding: 10mm 15mm;font-family: "SimSun", "Microsoft YaHei", sans-serif; font-size: 12pt;color: #333;}/* 标题样式 */.title { text-align: center; font-size: 16pt; font-weight: bold; margin-bottom: 8mm;}.subtitle {text-align: center;font-size: 14pt;margin-bottom: 12mm;}/* 表格样式 */table.detail {width: 100%;border-collapse: collapse;margin-top: 5mm;page-break-inside: auto;border: 1px solid #000;}.detail-row td {border: 1px solid #000;padding: 2mm 1mm;height: 8mm;vertical-align: middle;}.bold-row td {font-weight: bold;background-color: #f0f0f0 !important;}/* 关键打印控制 - 确保每页重复 */thead {display: table-header-group !important;}tfoot {display: table-footer-group !important;}tr {page-break-inside: avoid !important;break-inside: avoid;}/* 列宽调整 */.bold-row-col01, .detail-row-col01 { width: 5%; text-align: center; }.bold-row-col02, .detail-row-col02 { width: 10%; text-align: center; }.bold-row-col03, .detail-row-col03 { width: 20%; padding-left: 3mm; }.bold-row-col04, .detail-row-col04 { width: 8%; text-align: center; }.bold-row-col05, .detail-row-col05 { width: 8%; text-align: center; }.bold-row-col06, .detail-row-col06 { width: 10%; text-align: center; }.bold-row-col07, .detail-row-col07 { width: 10%; text-align: center; }.bold-row-col08, .detail-row-col08 { width: 20%; padding-left: 3mm; }/* 强制打印背景色和边框 */* {-webkit-print-color-adjust: exact !important;print-color-adjust: exact !important;color-adjust: exact !important;}/* 页码和页脚样式 */.page-footer {position: fixed;bottom: 10mm;left: 0;right: 0;text-align: center;font-size: 10pt;padding-top: 2mm;border-top: 1px solid #ccc;}.print-time {position: fixed;bottom: 10mm;left: 15mm;font-size: 10pt;}.page-number {position: fixed;bottom: 10mm;right: 15mm;font-size: 10pt;}@page {size: A4;margin: 10mm 15mm;@bottom-center {content: "第 " counter(page) " 页/共 " counter(pages) " 页";font-size: 10pt;padding-top: 5mm;}}/* 隐藏屏幕专用元素 */.screen-only {display: none;}</style></head><body><div class="page"><div class="title">地方市疾病预防控制中心</div><div class="subtitle">试剂清单</div><table class="detail"><thead><tr class="detail-row bold-row"><td class="bold-row-col01">序号</td><td class="bold-row-col02">编号</td><td class="bold-row-col03">品名 规格</td><td class="bold-row-col04">单位</td><td class="bold-row-col05">数量</td><td class="bold-row-col06">单价</td><td class="bold-row-col07">金额</td><td class="bold-row-col08">用途</td></tr></thead><tfoot><tr class="footer-row"><td :colspan="8">备注：</td></tr></tfoot><tbody>${printData.value.map((item, index) => `<tr class="detail-row"><td class="detail-row-col01">${index + 1}</td><td class="detail-row-col02">${item.reagentNo}</td><td class="detail-row-col03">${item.reagentName} ${item.reagentSpec}</td><td class="detail-row-col04">${item.reagentUnit}</td><td class="detail-row-col05">${item.amount}</td><td class="detail-row-col06">${Number((item.total / item.amount).toFixed(2))}</td><td class="detail-row-col07">${item.total}</td><td class="detail-row-col08">${item.purpose}</td></tr>`).join("")}</tbody></table><!-- 打印页脚 --><div class="print-time">打印时间: ${printTime}</div><div class="page-number"></div></div><script>// 添加页码计数器window.onload = function() {// 添加页码const totalPages = Math.ceil(document.body.scrollHeight / (297 - 20)); // A4高度297mm，减去边距document.querySelector('.page-number').textContent = '第 ' + (window.pageCounter || 1) + ' 页/共 ' + totalPages + ' 页';};<\/script></body></html>`);printWindow?.document.close();// 延迟打印确保样式加载printWindow?.addEventListener("load", () => {setTimeout(() => {printWindow.print();printWindow.close();}, 1000);});});
};
</script><template><div class="print-container"><!-- 打印按钮 --><button @click="printDocument" class="print-button">打印试剂清单</button><!-- 屏幕预览内容 --><div class="page screen-preview"><div class="title">地方市疾病预防控制中心</div><div class="subtitle">试剂清单</div><table class="detail"><thead><tr class="detail-row bold-row"><td class="bold-row-col01">序号</td><td class="bold-row-col02">编号</td><td class="bold-row-col03">品名 规格</td><td class="bold-row-col04">单位</td><td class="bold-row-col05">数量</td><td class="bold-row-col06">单价</td><td class="bold-row-col07">金额</td><td class="bold-row-col08">用途</td></tr></thead><!-- 注意：tfoot 必须在 tbody 前 --><tfoot><tr class="footer-row"><td :colspan="8">备注：</td></tr></tfoot><tbody><tr class="detail-row" v-for="(item, index) in printData" :key="index"><td class="detail-row-col01">{{ index + 1 }}</td><td class="detail-row-col02">{{ item.reagentNo }}</td><td class="detail-row-col03">{{ item.reagentName }} {{ item.reagentSpec }}</td><td class="detail-row-col04">{{ item.reagentUnit }}</td><td class="detail-row-col05">{{ item.amount }}</td><td class="detail-row-col06">{{ Number((item.total / item.amount).toFixed(2)) }}</td><td class="detail-row-col07">{{ item.total }}</td><td class="detail-row-col08">{{ item.purpose }}</td></tr></tbody></table><!-- 屏幕预览页脚 --><div class="screen-footer"><div>打印时间: {{ new Date().toLocaleString() }}</div><div>页码: 1/1 (预览)</div></div></div></div>
</template><style scoped>
/* 屏幕样式 */
.print-container {padding: 20px;background-color: white;max-width: 1200px;margin: 0 auto;
}.screen-preview {width: 210mm;min-height: 297mm;margin: 20px auto;padding: 20px;background: white;box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);position: relative;
}.title {text-align: center;font-size: 20px;font-weight: bold;margin-bottom: 10px;
}.subtitle {text-align: center;font-size: 18px;font-weight: bold;margin-bottom: 20px;color: #1890ff;
}.detail {width: 100%;border-collapse: collapse;margin-top: 20px;border: 1px solid #ddd;
}.detail-row td {border: 1px solid #ddd;padding: 10px;text-align: center;
}.bold-row td {font-weight: bold;background-color: #f0f0f0;border-bottom: 2px solid #999;
}.footer-row td {font-weight: bold;background-color: #e6f7ff;border-top: 2px solid #999;
}.print-button {display: block;margin: 20px auto;padding: 12px 30px;background: #1890ff;color: white;border: none;border-radius: 4px;font-size: 16px;cursor: pointer;transition: all 0.3s;box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}.print-button:hover {background: #40a9ff;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
}.print-button:active {transform: translateY(0);
}/* 列宽样式 */
.bold-row-col01,
.detail-row-col01 {width: 5%;
}
.bold-row-col02,
.detail-row-col02 {width: 10%;
}
.bold-row-col03,
.detail-row-col03 {width: 20%;text-align: left;padding-left: 15px !important;
}
.bold-row-col04,
.detail-row-col04 {width: 8%;
}
.bold-row-col05,
.detail-row-col05 {width: 8%;
}
.bold-row-col06,
.detail-row-col06 {width: 10%;
}
.bold-row-col07,
.detail-row-col07 {width: 10%;
}
.bold-row-col08,
.detail-row-col08 {width: 20%;text-align: left;padding-left: 15px !important;
}/* 屏幕预览页脚 */
.screen-footer {display: flex;justify-content: space-between;margin-top: 30px;padding-top: 10px;border-top: 1px solid #eee;font-size: 14px;color: #666;
}/* 打印时不显示的元素 */
@media print {.screen-preview,.screen-footer {display: none !important;}
}
</style>

http://www.lqws.cn/news/559243.html

相关文章：

  • 个人日记本小程序开发方案（使用IntelliJ IDEA）
  • C语言---常见的字符函数和字符串函数介绍
  • 【EDA软件】【联合Modelsim 同步FIFO仿真】
  • FPGA原理结构
  • 用AI给AR加“智慧”：揭秘增强现实智能互动的优化秘密
  • FPGA设计的用户约束
  • 领域驱动设计(DDD)【23】之泛化：从概念到实践
  • Spring Cloud Gateway 实战：网关配置与 Sentinel 限流详解
  • win10部署本地LLM和AI Agent
  • NLP——RNN传统模型
  • Linux系统环境编程之进程1
  • Jina-Embeddings-V4：多模态向量模型的革命性突破与实战指南
  • 华为云Flexus+DeepSeek征文｜基于Dify构建AI资讯语音播报工作流
  • 鸿蒙5：组件监听和部分状态管理V2
  • Conformal LEC：官方学习教程
  • 【软考高项论文】论信息系统项目的沟通管理
  • [Andrej Karpathy_2] vibe coding | 大型语言模型的1960年代 | 自主性滑块
  • 某省赛题-windows内存取证
  • 【Linux】mmap分析
  • Excel限制编辑：保护表格的实用功能
  • 嵌入式网络通信与物联网协议全解析：Wi-Fi、BLE、LoRa、ZigBee 实战指南
  • Linux环境安装Redis的多种方式分析
  • Flutter基础（Isolate）
  • cocos creator 3.8 - 精品源码 - 六边形消消乐(六边形叠叠乐、六边形堆叠战士)
  • docker解析
  • Netty 揭秘CompositeByteBuf：零拷贝优化核心技术
  • Flutter基础（路由页面跳转）
  • Neo4j无法建立到 localhost:7474 服务器的连接出现404错误
  • Nacos源码之服务拉取（RestTemplate）
  • 访问不了/druid/index.html (sql.html 或 login.html)