GitHub_Trending/ba/basic打印功能实现：自定义打印样式与分页控制-优快云博客

GitHub_Trending/ba/basic打印功能实现：自定义打印样式与分页控制

【免费下载链接】basic ⭐⭐⭐⭐⭐ 一款开箱即用的 Vue 中后台管理系统框架，支持多款 UI 组件库，兼容PC、移动端。vue-admin 项目地址: https://gitcode.com/GitHub_Trending/ba/basic

在中后台管理系统开发中，数据报表打印是常见需求。本文将详细介绍如何在GitHub_Trending/ba/basic项目中实现自定义打印样式与分页控制功能，帮助开发者解决打印格式错乱、内容截断等问题。

打印功能现状分析

当前项目中未发现已实现的打印功能相关代码，需要从零开始构建。主要涉及两个核心部分：

打印样式定制：通过CSS媒体查询针对打印设备优化页面布局
打印行为控制：通过JavaScript实现打印触发与分页逻辑

自定义打印样式实现

添加打印专用CSS样式

在全局样式文件src/assets/styles/globals.css中添加@media print媒体查询，定义打印时的特殊样式：

@media print {
  /* 隐藏非打印区域 */
  .header, .sidebar, .toolbar, .tabbar {
    display: none !important;
  }
  
  /* 设置打印纸张大小和边距 */
  @page {
    size: A4;
    margin: 1.5cm;
  }
  
  /* 确保内容适应打印宽度 */
  .main-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* 打印字体优化 */
  body {
    font-family: "SimSun", "宋体", serif;
    font-size: 12pt;
    color: #333;
    background: #fff !important;
  }
}

实现打印分页控制

在需要分页的内容区块添加自定义类page-break-after，并在CSS中定义分页行为：

/* 在globals.css中添加 */
@media print {
  /* 分页控制类 */
  .page-break-after {
    page-break-after: always;
  }
  
  .page-break-before {
    page-break-before: always;
  }
  
  .no-page-break {
    page-break-inside: avoid;
  }
}

打印功能组件开发

创建打印工具函数

在src/utils/index.ts中添加打印相关工具函数：

/**
 * 触发打印功能
 * @param selector 可选，指定打印区域选择器
 */
export const triggerPrint = (selector?: string) => {
  // 保存当前页面样式
  const originalStyle = document.body.style.cssText;
  
  if (selector) {
    // 隐藏非打印区域
    document.body.classList.add('print-mode');
    
    // 打印指定区域
    const printSection = document.createElement('div');
    const targetElement = document.querySelector(selector);
    if (targetElement) {
      printSection.innerHTML = targetElement.innerHTML;
      document.body.appendChild(printSection);
      
      // 触发打印
      window.print();
      
      // 移除临时打印区域
      document.body.removeChild(printSection);
    }
  } else {
    // 打印整个页面
    window.print();
  }
  
  // 恢复页面样式
  document.body.style.cssText = originalStyle;
};

开发打印按钮组件

在src/components/PrintButton/index.vue中创建打印功能按钮：

<template>
  <button 
    class="fa-button" 
    @click="handlePrint"
    :title="t('common.print')"
  >
    <FaIcon icon="icon-park-outline:print" class="mr-2" />
    {{ t('common.print') }}
  </button>
</template>

<script setup lang="ts">
import { triggerPrint } from '@/utils';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const props = defineProps({
  printSelector: {
    type: String,
    default: ''
  }
});

const handlePrint = () => {
  triggerPrint(props.printSelector);
};
</script>

实际应用示例

在数据报表页面使用打印功能

在报表页面src/views/report/index.vue中集成打印功能：

<template>
  <div class="report-container">
    <!-- 打印按钮 -->
    <PrintButton printSelector=".report-content" />
    
    <!-- 报表内容 -->
    <div class="report-content">
      <!-- 报表标题 -->
      <h1 class="report-title">销售数据报表</h1>
      
      <!-- 报表头部信息 -->
      <div class="report-header no-page-break">
        <!-- 报表头部内容 -->
      </div>
      
      <!-- 第一页内容 -->
      <div class="report-page page-break-after">
        <!-- 第一页数据 -->
      </div>
      
      <!-- 第二页内容 -->
      <div class="report-page">
        <!-- 第二页数据 -->
      </div>
    </div>
  </div>
</template>

添加打印预览功能

在src/views/report/index.vue中添加打印预览功能：

<template>
  <div class="report-container">
    <!-- 操作按钮区 -->
    <div class="operation-bar">
      <PrintButton printSelector=".report-content" />
      <button 
        class="fa-button" 
        @click="showPrintPreview = true"
      >
        <FaIcon icon="icon-park-outline:preview" class="mr-2" />
        {{ t('common.preview') }}
      </button>
    </div>
    
    <!-- 打印预览模态框 -->
    <FaModal v-model:visible="showPrintPreview" title="打印预览">
      <div class="print-preview-container">
        <div class="preview-content" :class="{'dark': isDark}">
          <!-- 预览内容 -->
          <div class="report-content">
            <!-- 报表内容 -->
          </div>
        </div>
      </div>
    </FaModal>
  </div>
</template>

样式优化与浏览器兼容性

处理深色模式打印问题

在src/assets/styles/globals.css中添加深色模式打印兼容样式：

@media print {
  .dark {
    --text-color: #333 !important;
    --bg-color: #fff !important;
  }
  
  /* 确保表格边框在打印时可见 */
  table {
    border-collapse: collapse !important;
  }
  
  th, td {
    border: 1px solid #ddd !important;
    padding: 8px !important;
  }
}

添加打印加载状态

在src/components/PrintButton/index.vue中添加加载状态：

<template>
  <button 
    class="fa-button" 
    @click="handlePrint"
    :loading="isPrinting"
    :disabled="isPrinting"
  >
    <FaIcon icon="icon-park-outline:print" class="mr-2" />
    {{ t('common.print') }}
  </button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { triggerPrint } from '@/utils';

const isPrinting = ref(false);

const handlePrint = async () => {
  isPrinting.value = true;
  
  try {
    // 延迟执行，确保加载状态显示
    await new Promise(resolve => setTimeout(resolve, 300));
    triggerPrint(props.printSelector);
  } finally {
    // 打印对话框关闭后恢复状态
    setTimeout(() => {
      isPrinting.value = false;
    }, 500);
  }
};
</script>

总结与扩展

通过本文介绍的方法，我们实现了GitHub_Trending/ba/basic项目的打印功能，包括：

自定义打印样式，优化打印布局
实现分页控制，避免内容截断
开发打印组件，支持指定区域打印
添加打印预览功能，提升用户体验

后续可扩展功能：

打印配置面板，允许用户自定义纸张大小、方向等参数
批量打印功能，支持多报表连续打印
导出PDF功能，集成jsPDF等库实现客户端PDF生成

完整实现代码可参考项目中的相关文件：

打印工具函数：src/utils/index.ts
打印按钮组件：src/components/PrintButton/index.vue
全局打印样式：src/assets/styles/globals.css
报表页面示例：src/views/report/index.vue

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考