Vue3 前端打印表格内容（渐进式改进优化）

【代码】Vue3 前端打印表格内容。

BillKu

233人浏览 · 2025-06-29 14:50:30

BillKu · 2025-06-29 14:50:30 发布

一、原型

预览展示效果：

打印效果：

代码：

<script setup lang="ts" name="PrintTemplateReagent02">
import { inject, onMounted, ref, type Ref } from "vue";

const injectData = inject<Ref<any[]>>("printData", ref([]));
const printData = ref<any[]>([]);

onMounted(() => {
  printData.value = injectData.value;
});
</script>

<template>
  <!-- 打印页面 -->
  <div class="page" v-for="itemIndex in printData.length" :key="itemIndex">
    <div class="title">地方市疾病预防控制中心</div>
    <div class="title">试剂信息</div>
    <table class="detail">
      <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>
      <tr class="detail-row">
        <td class="detail-row-col01">{{ itemIndex }}</td>
        <td class="detail-row-col02">{{ printData[itemIndex - 1].reagentNo }}</td>
        <td class="detail-row-col03">
          {{ printData[itemIndex - 1].reagentName }}
          {{ printData[itemIndex - 1].reagentSpec }}
        </td>
        <td class="detail-row-col04">{{ printData[itemIndex - 1].reagentUnit }}</td>
        <td class="detail-row-col05">{{ printData[itemIndex - 1].amount }}</td>
        <td class="detail-row-col06">
          {{ Number((printData[itemIndex - 1].total / printData[itemIndex - 1].amount).toFixed(2)) }}
        </td>
        <td class="detail-row-col07">{{ printData[itemIndex - 1].total }}</td>
        <td class="detail-row-col08">{{ printData[itemIndex - 1].purpose }}</td>
      </tr>
    </table>
    <div class="footer border-top-row">
      <div class="pageNum">
        <span>第 {{ itemIndex }} 页 / 共 {{ printData.length }} 页</span>
      </div>
    </div>
    <!-- 插入分页，在新的一页开始 -->
    <div style="page-break-before: always" v-if="itemIndex !== printData.length"></div>
  </div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
tr {
  // 跨页断行
  page-break-inside: avoid;
}
.page {
  // 纵向模式
  // 页面可用区域的宽度，210mm(793.698px) - 左边距10mm(37.792px) - 右边距10mm(37.792px) = 190mm(718.109px) = 718px
  width: 190mm;
  // 页面可用区域的高度，297mm(1122.520px) - 上边距10mm(37.792px) - 下边距10mm(37.792px) = 277mm(1046.930px) = 1047px
  height: 277mm;

  // 父相
  position: relative;
}
.title {
  text-align: center;
  height: 10mm;
  line-height: 10mm;
  font-size: 24px;
  font-weight: bold;
}
.detail {
  // 合并边框，合并边框腾出的空间为：边框宽度 * (列数 - 1)，边框宽度总和为：边框宽度 * (列数 + 1)
  border-collapse: collapse;

  .bold-row {
    font-weight: bold;
    text-align: center;
  }
}
// 表格单元格样式
.detail td {
  // 边框 0.2mm
  border: 0.2mm solid #999;
  // 左右内边距 1mm
  padding: 0 1mm;
}
.footer {
  // 子绝
  position: absolute;
  bottom: 0;
  width: 100%;
  .pageNum {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.border-top-row {
  border-top: 0.2mm solid #999;
  height: auto;
}
.bold-row {
  font-weight: bold;
}
</style>

二、增加外边距、阴影效果

预览展示效果：

打印效果：

代码：

.page {
  
  // 外边距
  margin: 10mm;
  // 阴影效果
  box-shadow: 0 0 10mm rgba(0, 0, 0, 0.1);
}

三、增加媒体打印样式，不打印外边距和阴影

预览展示效果：

打印效果：

代码：

<style scoped lang="scss">

// 设置打印样式
@media print {
  .page {
    // 打印无外边距
    margin: 0;
    // 打印无阴影
    box-shadow: none;
  }
}
</style>

四、增加固定列宽布局，设置各列的列宽

预览展示效果：

打印效果：

代码：

.detail {

  // 固定列宽布局
  table-layout: fixed;
  &-row,
  .bold-row {
    height: 10mm;
    line-height: 10mm;
    &-col01 {
      // width: 12mm; // 设置视口宽度为 12mm
      width: 9.6mm; // 设置宽度为 9.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      text-align: center;
    }
    &-col02 {
      // width: 25mm; // 设置视口宽度为 25mm
      width: 22.6mm; // 设置宽度为 22.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
    }
    &-col03 {
      // width: 45mm; // 设置视口宽度为 45mm
      width: 42.6mm; // 设置宽度为 42.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
    }
    &-col04 {
      // width: 15mm; // 设置视口宽度为 15mm
      width: 12.6mm; // 设置宽度为 12.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      text-align: center;
    }
    &-col05 {
      // width: 15mm; // 设置视口宽度为 15mm
      width: 12.6mm; // 设置宽度为 12.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      text-align: center;
    }
    &-col06 {
      // width: 20mm; // 设置视口宽度为 20mm
      width: 17.6mm; // 设置宽度为 17.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      text-align: center;
    }
    &-col07 {
      // width: 20mm; // 设置视口宽度为 20mm
      width: 17.6mm; // 设置宽度为 17.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      text-align: center;
    }
    &-col08 {
      // width: 39.4mm; // 计算这列的视口宽度 = 页面可用区域的宽度 190mm - 前面各列的视口宽度总和 152mm + 合并边框腾出的空间 1.4mm = 39.4mm
      width: 37mm; // 设置宽度为 37mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
    }
  }

}

五、媒体打印样式，增加列宽设置

预览展示效果：

打印效果：

代码：

// 表格列宽设置，打印样式中 width 就是视口宽度
  .detail {
    &-row,
    .bold-row {
      &-col01 {
        width: 12mm; // 设置视口宽度为 12mm
        // width: 9.6mm; // 设置宽度为 9.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      }
      &-col02 {
        width: 25mm; // 设置视口宽度为 25mm
        // width: 22.6mm; // 设置宽度为 22.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      }
      &-col03 {
        width: 45mm; // 设置视口宽度为 45mm
        // width: 42.6mm; // 设置宽度为 42.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      }
      &-col04 {
        width: 15mm; // 设置视口宽度为 15mm
        // width: 12.6mm; // 设置宽度为 12.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      }
      &-col05 {
        width: 15mm; // 设置视口宽度为 15mm
        // width: 12.6mm; // 设置宽度为 12.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      }
      &-col06 {
        width: 20mm; // 设置视口宽度为 20mm
        // width: 17.6mm; // 设置宽度为 17.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      }
      &-col07 {
        width: 20mm; // 设置视口宽度为 20mm
        // width: 17.6mm; // 设置宽度为 17.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      }
      &-col08 {
        width: 39.4mm; // 计算这列的视口宽度 = 页面可用区域的宽度 190mm - 前面各列的视口宽度总和 152mm + 合并边框腾出的空间 1.4mm = 39.4mm
        // width: 37mm; // 设置宽度为 37mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      }
    }
  }

六、调整行高，由10mm调整到30mm

预览展示效果：

打印效果：

代码：

.detail {

  &-row,
  .bold-row {
    height: 30mm;
    line-height: 30mm;
    
  }

}

七、调整左右内边距，由1mm调整到5mm

预览展示效果：

打印效果：

代码：

// 表格单元格样式
.detail td {

  // 左右内边距 1mm
  padding: 0 5mm;
}

八、调整打印边框颜色，屏幕显示#999，打印为#000

预览展示效果：

打印效果：

代码：

// 设置打印样式
@media print {

  // 表格单元格样式
  .detail td {
    // 边框颜色
    border-color: #000;
  }
}

九、取消行高、内边距的设置（之前只为测试变动时是否需要同时设置打印样式，测试结论是【不需要】）

预览展示效果：

打印效果：

代码：

.detail {

  &-row,
  .bold-row {
    height: 10mm;
    line-height: 10mm;
    
  }

}

// 表格单元格样式
.detail td {

  // 左右内边距 1mm
  padding: 0 1mm;
}

十、表格表头行字体加粗

预览展示效果：

打印效果：

代码：

// 设置打印样式
@media print {

  // 加粗行样式
  .bold-row {
    /* 明确指定了支持粗体渲染的无衬线字体，不然可能无法实现加粗效果（浏览器默认打印字体可能不支持粗体、设置的字体可能不支持粗体） */
    font-family: Arial, "Helvetica Neue", sans-serif !important;
  }
}

十一、最终定型

预览展示效果：

打印效果：

代码：

<script setup lang="ts" name="PrintTemplateReagent02">
import { inject, onMounted, ref, type Ref } from "vue";

const injectData = inject<Ref<any[]>>("printData", ref([]));
const printData = ref<any[]>([]);

onMounted(() => {
  printData.value = injectData.value;
});
</script>

<template>
  <!-- 打印页面 -->
  <div class="page" v-for="itemIndex in printData.length" :key="itemIndex">
    <div class="title">地方市疾病预防控制中心</div>
    <div class="title">试剂信息</div>
    <table class="detail">
      <tr class="detail-row bold-row" :class="{ 'print-bold': true }">
        <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>
      <tr class="detail-row">
        <td class="detail-row-col01">{{ itemIndex }}</td>
        <td class="detail-row-col02">{{ printData[itemIndex - 1].reagentNo }}</td>
        <td class="detail-row-col03">
          {{ printData[itemIndex - 1].reagentName }}
          {{ printData[itemIndex - 1].reagentSpec }}
        </td>
        <td class="detail-row-col04">{{ printData[itemIndex - 1].reagentUnit }}</td>
        <td class="detail-row-col05">{{ printData[itemIndex - 1].amount }}</td>
        <td class="detail-row-col06">
          {{ Number((printData[itemIndex - 1].total / printData[itemIndex - 1].amount).toFixed(2)) }}
        </td>
        <td class="detail-row-col07">{{ printData[itemIndex - 1].total }}</td>
        <td class="detail-row-col08">{{ printData[itemIndex - 1].purpose }}</td>
      </tr>
    </table>
    <div class="footer border-top-row">
      <div class="pageNum">
        <span>第 {{ itemIndex }} 页 / 共 {{ printData.length }} 页</span>
      </div>
    </div>
    <!-- 插入分页，在新的一页开始 -->
    <div style="page-break-before: always" v-if="itemIndex !== printData.length"></div>
  </div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

tr {
  // 跨页断行
  page-break-inside: avoid;
}

.page {
  // 纵向模式
  // 页面可用区域的宽度，210mm(793.698px) - 左边距10mm(37.792px) - 右边距10mm(37.792px) = 190mm(718.109px) = 718px
  width: 190mm;
  // 页面可用区域的高度，297mm(1122.520px) - 上边距10mm(37.792px) - 下边距10mm(37.792px) = 277mm(1046.930px) = 1047px
  height: 277mm;

  // 父相
  position: relative;

  // 外边距
  margin: 10mm;
  // 阴影效果
  box-shadow: 0 0 10mm rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  height: 10mm;
  line-height: 10mm;
  font-size: 24px;
  font-weight: bold;
}

.detail {
  // 合并边框，合并边框腾出的空间为：边框宽度 * (列数 - 1)，边框宽度总和为：边框宽度 * (列数 + 1)
  border-collapse: collapse;
  // 固定列宽布局
  table-layout: fixed;
  &-row,
  .bold-row {
    height: 10mm;
    line-height: 10mm;
    &-col01 {
      // width: 12mm; // 设置视口宽度为 12mm
      width: 9.6mm; // 设置宽度为 9.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      text-align: center;
    }
    &-col02 {
      // width: 25mm; // 设置视口宽度为 25mm
      width: 22.6mm; // 设置宽度为 22.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
    }
    &-col03 {
      // width: 45mm; // 设置视口宽度为 45mm
      width: 42.6mm; // 设置宽度为 42.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
    }
    &-col04 {
      // width: 15mm; // 设置视口宽度为 15mm
      width: 12.6mm; // 设置宽度为 12.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      text-align: center;
    }
    &-col05 {
      // width: 15mm; // 设置视口宽度为 15mm
      width: 12.6mm; // 设置宽度为 12.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      text-align: center;
    }
    &-col06 {
      // width: 20mm; // 设置视口宽度为 20mm
      width: 17.6mm; // 设置宽度为 17.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      text-align: center;
    }
    &-col07 {
      // width: 20mm; // 设置视口宽度为 20mm
      width: 17.6mm; // 设置宽度为 17.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      text-align: center;
    }
    &-col08 {
      // width: 39.4mm; // 计算这列的视口宽度 = 页面可用区域的宽度 190mm - 前面各列的视口宽度总和 152mm + 合并边框腾出的空间 1.4mm = 39.4mm
      width: 37mm; // 设置宽度为 37mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
    }
  }
  // 加粗行样式
  .bold-row {
    font-weight: bold;
    text-align: center;
  }
}

// 表格单元格样式
.detail td {
  // 边框 0.2mm
  border: 0.2mm solid #999;
  // 左右内边距 1mm
  padding: 0 1mm;
}

.footer {
  // 子绝
  position: absolute;
  bottom: 0;
  width: 100%;
  .pageNum {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.border-top-row {
  border-top: 0.2mm solid #999;
  height: auto;
}

// 设置打印样式
@media print {
  .page {
    // 打印无外边距
    margin: 0;
    // 打印无阴影
    box-shadow: none;
  }

  // 表格列宽设置，打印样式中 width 就是视口宽度
  .detail {
    &-row,
    .bold-row {
      &-col01 {
        width: 12mm; // 设置视口宽度为 12mm
        // width: 9.6mm; // 设置宽度为 9.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      }
      &-col02 {
        width: 25mm; // 设置视口宽度为 25mm
        // width: 22.6mm; // 设置宽度为 22.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      }
      &-col03 {
        width: 45mm; // 设置视口宽度为 45mm
        // width: 42.6mm; // 设置宽度为 42.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      }
      &-col04 {
        width: 15mm; // 设置视口宽度为 15mm
        // width: 12.6mm; // 设置宽度为 12.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      }
      &-col05 {
        width: 15mm; // 设置视口宽度为 15mm
        // width: 12.6mm; // 设置宽度为 12.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      }
      &-col06 {
        width: 20mm; // 设置视口宽度为 20mm
        // width: 17.6mm; // 设置宽度为 17.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      }
      &-col07 {
        width: 20mm; // 设置视口宽度为 20mm
        // width: 17.6mm; // 设置宽度为 17.6mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      }
      &-col08 {
        width: 39.4mm; // 计算这列的视口宽度 = 页面可用区域的宽度 190mm - 前面各列的视口宽度总和 152mm + 合并边框腾出的空间 1.4mm = 39.4mm
        // width: 37mm; // 设置宽度为 37mm = 视口宽度 - 1mm（左内边距）- 1mm（右内边距）- 0.2mm（左边框）- 0.2mm（右边框）
      }
    }
  }

  // 表格单元格样式
  .detail td {
    // 边框颜色
    border-color: #000;
  }

  // 加粗行样式
  .bold-row {
    /* 核心解决方案 */
    /* 明确指定了支持粗体渲染的无衬线字体，不然可能无法实现加粗效果（浏览器默认打印字体可能不支持粗体、设置的字体可能不支持粗体） */
    font-family: Arial, "Helvetica Neue", sans-serif !important;
    font-weight: bold !important; /* 增加优先级 */

    /* 打印优化增强 */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;

    /* 浏览器兼容性扩展 */
    font-weight: 700; /* 数值格式更可靠 */
    text-shadow: 0.1px 0; /* 微阴影增强粗体效果 */
  }
}
</style>

横向打印模式

预览展示效果：

打印效果：

代码：

<script setup lang="ts" name="PrintTemplateReagent01">
import useUserInfoStore from "@/stores/userInfo";
import { formatDate } from "@/utils/formatter";
import { computed, inject, onMounted, ref, type Ref } from "vue";

const injectData = inject<Ref<any[]>>("printData", ref([]));
const printData = ref<any[]>([]);
// 当前日期
const currentDate = ref(formatDate(new Date(), "YYYY-MM-DD"));
// 当前用户名称
const moniker = computed(() => useUserInfoStore().info.moniker);

onMounted(() => {
  printData.value = injectData.value;
});
</script>

<template>
  <!-- 打印页面 -->
  <div class="page">
    <div class="title">地方市疾病预防控制中心</div>
    <div class="title">试剂清单</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>
      <tbody>
        <tr class="detail-row" v-for="itemIndex in printData.length" :key="itemIndex">
          <td class="detail-row-col01">{{ itemIndex }}</td>
          <td class="detail-row-col02">{{ printData[itemIndex - 1].reagentNo }}</td>
          <td class="detail-row-col03">
            {{ printData[itemIndex - 1].reagentName }}
            {{ printData[itemIndex - 1].reagentSpec }}
          </td>
          <td class="detail-row-col04">{{ printData[itemIndex - 1].reagentUnit }}</td>
          <td class="detail-row-col05">{{ printData[itemIndex - 1].amount }}</td>
          <td class="detail-row-col06">
            {{ Number((printData[itemIndex - 1].total / printData[itemIndex - 1].amount).toFixed(2)) }}
          </td>
          <td class="detail-row-col07">{{ printData[itemIndex - 1].total }}</td>
          <td class="detail-row-col08">{{ printData[itemIndex - 1].purpose }}</td>
        </tr>
      </tbody>
    </table>
    <div class="footer-row">
      <span class="footer-row-person">制表人：{{ moniker }}</span>
      <span class="footer-row-date">制表日期：{{ currentDate }}</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

tr {
  // 跨页断行
  page-break-inside: avoid;
}

.page {
  // 横向模式
  // 页面可用区域的宽度，297mm(1122.520px) - 左边距10mm(37.792px) - 右边距10mm(37.792px) = 277mm(1046.930px) = 1047px
  width: 1047px;
  // 页面可用区域的高度，210mm(793.698px) - 上边距10mm(37.792px) - 下边距10mm(37.792px) = 190mm(718.109px) = 718px
  // height: 718px;

  // 父相
  position: relative;

  // 外边距
  margin: 37.792px;
  // 阴影效果
  box-shadow: 0 0 37.792px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  height: 30px;
  line-height: 30px;
  font-size: 24px;
  font-weight: bold;
}

.detail {
  // 合并边框，合并边框腾出的空间为：边框宽度 * (列数 - 1)，边框宽度总和为：边框宽度 * (列数 + 1)
  border-collapse: collapse;
  // 固定列宽布局
  table-layout: fixed;
  &-row,
  .bold-row {
    height: 30px;
    line-height: 30px;
    &-col01 {
      // width: 40px; // 设置视口宽度为 40px
      width: 30px; // 设置宽度为 30px = 视口宽度 - 4px（左内边距）- 4px（右内边距）- 1px（左边框）- 1px（右边框）
      text-align: center;
    }
    &-col02 {
      // width: 100px; // 设置视口宽度为 100px
      width: 90px; // 设置宽度为 90px = 视口宽度 - 4px（左内边距）- 4px（右内边距）- 1px（左边框）- 1px（右边框）
    }
    &-col03 {
      // width: 450px; // 设置视口宽度为 450px
      width: 440px; // 设置宽度为 440px = 视口宽度 - 4px（左内边距）- 4px（右内边距）- 1px（左边框）- 1px（右边框）
    }
    &-col04 {
      // width: 40px; // 设置视口宽度为 40px
      width: 30px; // 设置宽度为 30px = 视口宽度 - 4px（左内边距）- 4px（右内边距）- 1px（左边框）- 1px（右边框）
      text-align: center;
    }
    &-col05 {
      // width: 40px; // 设置视口宽度为 40px
      width: 30px; // 设置宽度为 30px = 视口宽度 - 4px（左内边距）- 4px（右内边距）- 1px（左边框）- 1px（右边框）
      text-align: center;
    }
    &-col06 {
      // width: 80px; // 设置视口宽度为 80px
      width: 70px; // 设置宽度为 70px = 视口宽度 - 4px（左内边距）- 4px（右内边距）- 1px（左边框）- 1px（右边框）
      text-align: center;
    }
    &-col07 {
      // width: 80px; // 设置视口宽度为 80px
      width: 70px; // 设置宽度为 70px = 视口宽度 - 4px（左内边距）- 4px（右内边距）- 1px（左边框）- 1px（右边框）
      text-align: center;
    }
    &-col08 {
      // width: 224px; // 计算这列的视口宽度 = 页面可用区域的宽度 1047px - 前面各列的视口宽度总和 830px + 合并边框腾出的空间 7px = 224px
      width: 214px; // 设置宽度为 214px = 视口宽度 - 4px（左内边距）- 4px（右内边距）- 1px（左边框）- 1px（右边框）
    }
  }
  // 加粗行样式
  .bold-row {
    font-weight: bold;
    text-align: center;
  }
}

// 表格单元格样式
.detail td {
  border: 1px solid #999;
  padding: 0 4px;
}

.footer-row {
  height: 60px;
  line-height: 60px;
  .footer-row-person {
    margin-left: 10px;
  }
  .footer-row-date {
    margin-left: 50px;
  }
}

// 设置打印样式
@media print {
  .page {
    // 打印无外边距
    margin: 0;
    // 打印无阴影
    box-shadow: none;
  }

  // 表格列宽设置，打印样式中 width 就是视口宽度
  .detail {
    &-row,
    .bold-row {
      &-col01 {
        width: 40px; // 设置视口宽度为 40px
        // width: 30px; // 设置宽度为 30px = 视口宽度 - 4px（左内边距）- 4px（右内边距）- 1px（左边框）- 1px（右边框）
      }
      &-col02 {
        width: 100px; // 设置视口宽度为 100px
        // width: 90px; // 设置宽度为 90px = 视口宽度 - 4px（左内边距）- 4px（右内边距）- 1px（左边框）- 1px（右边框）
      }
      &-col03 {
        width: 450px; // 设置视口宽度为 450px
        // width: 440px; // 设置宽度为 440px = 视口宽度 - 4px（左内边距）- 4px（右内边距）- 1px（左边框）- 1px（右边框）
      }
      &-col04 {
        width: 40px; // 设置视口宽度为 40px
        // width: 30px; // 设置宽度为 30px = 视口宽度 - 4px（左内边距）- 4px（右内边距）- 1px（左边框）- 1px（右边框）
      }
      &-col05 {
        width: 40px; // 设置视口宽度为 40px
        // width: 30px; // 设置宽度为 30px = 视口宽度 - 4px（左内边距）- 4px（右内边距）- 1px（左边框）- 1px（右边框）
      }
      &-col06 {
        width: 80px; // 设置视口宽度为 80px
        // width: 70px; // 设置宽度为 70px = 视口宽度 - 4px（左内边距）- 4px（右内边距）- 1px（左边框）- 1px（右边框）
      }
      &-col07 {
        width: 80px; // 设置视口宽度为 80px
        // width: 70px; // 设置宽度为 70px = 视口宽度 - 4px（左内边距）- 4px（右内边距）- 1px（左边框）- 1px（右边框）
      }
      &-col08 {
        width: 224px; // 计算这列的视口宽度 = 页面可用区域的宽度 1047px - 前面各列的视口宽度总和 830px + 合并边框腾出的空间 7px = 224px
        // width: 214px; // 设置宽度为 214px = 视口宽度 - 4px（左内边距）- 4px（右内边距）- 1px（左边框）- 1px（右边框）
      }
    }
  }

  // 表格单元格样式
  .detail td {
    // 边框颜色
    border-color: #000;
  }

  // 加粗行样式
  .bold-row {
    /* 核心解决方案 */
    /* 明确指定了支持粗体渲染的无衬线字体，不然可能无法实现加粗效果（浏览器默认打印字体可能不支持粗体、设置的字体可能不支持粗体） */
    font-family: Arial, "Helvetica Neue", sans-serif !important;
    font-weight: bold !important; /* 增加优先级 */

    /* 打印优化增强 */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;

    /* 浏览器兼容性扩展 */
    font-weight: 700; /* 数值格式更可靠 */
    text-shadow: 0.1px 0; /* 微阴影增强粗体效果 */
  }
}
</style>

技术共进，成长同行——讯飞AI开发者社区

更多推荐

机器学习与人工智能

python# 创建基类# 定义一对多关系# 定义多对一关系# 定义多对多关系（通过关联表）# 关联表（用于多对多关系）SQLAlchemy ORM提供了强大而灵活的数据库操作方式，通过本文的介绍，您应该能够：安装和配置SQLAlchemy定义数据模型和关系执行基本的CRUD操作构建复杂查询管理数据库事务遵循最佳实践SQLAlchemy还有更多高级特性，如混合属性、事件监听、自定义查询等，值得进一

讯飞AI开发者社区

AI革新药物研发：基因组大数据新突破

基因组大数据分析已成为药物研发的核心环节，人工智能（AI）技术通过高效处理海量数据，显著加速了靶点发现、药物筛选和个性化治疗等流程。来源网站：pyklqwq.cn/article/25jNXMc/39830.html。来源网站：pyklqwq.cn/article/25KljJd/61632.html。来源网站：pyklqwq.cn/article/25AECkl/15960.html。来源网站：

讯飞AI开发者社区

多模态上下文工程化落地：提示工程架构师的ROI提升策略

在当今数字化浪潮中，人工智能技术日新月异。多模态数据，即包含文本、图像、音频、视频等多种形式的数据，正变得无处不在。想象一下，我们生活在一个信息丰富多样的世界里，就如同走进了一个大型的多媒体图书馆，每本书可能是文本形式，墙上挂着画作（图像），角落里播放着音乐（音频），还有视频在循环展示各种内容。多模态数据就像这个图书馆里丰富多样的信息载体。对于提示工程架构师而言，如何有效地处理和利用多模态上下文信