如何实现打印功能

一、AI赋能提供思路

基本框架

<!-- 隐藏的打印内容（默认不显示） -->
<div id="print-container" style="display: none;">
  <h1>退货单打印内容</h1>
  <table>
    <!-- 打印专用的表格结构 -->
  </table>
</div>

<script>
export default {
  methods: {
    handlePrint() {
      // 临时显示打印内容
      document.getElementById('print-container').style.display = 'block';
      
      // 调用打印
      window.print();
      
      // 打印完成后隐藏（需延迟执行，确保打印已触发）
      setTimeout(() => {
        document.getElementById('print-container').style.display = 'none';
      }, 500);
    }
  }
}
</script>

二、具体实操

1.实现显示页面

主要设计：按钮区、主表格区、打印区

<div class="button">
      <el-button size="mini" type="primary"
      @click="handlePrint">打印</el-button>
    </div>
    <div class="tableData">
      <el-table :data="tableData" ref="multiTable" @selection-change="handleSelection">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="名字"></el-table-column>
        <el-table-column prop="category" label="种类"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="stock" label="库存"></el-table-column>
        <el-table-column prop="date" label="时间"></el-table-column>
      </el-table>
    </div>
    <div id="printData" style="display: none;">
      <h2>库存表格</h2>
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>名字</th>
            <th>种类</th>
            <th>价格</th>
            <th>库存</th>
            <th>时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row,index) in selectRow" :key="row.id">
            <th>{{ index+1 }}</th>
            <th>{{ row.name }}</th>
            <th>{{ row.category }}</th>
            <th>{{ row.price }}</th>
            <th>{{ row.stock }}</th>
            <th>{{ row.date }}</th>
          </tr>
        </tbody>
      </table>
    </div>

2.准备基础数据

响应信息

{
  "code": 200,
  "message": "success",
  "data": [
    {
      "id": 1,
      "name": "华为Mate 60 Pro",
      "category": "手机",
      "price": 6999,
      "stock": 120,
      "date": "2023-10-01"
    },
    {
      "id": 2,
      "name": "苹果iPhone 15",
      "category": "手机",
      "price": 7999,
      "stock": 85,
      "date": "2023-09-20"
    }
  ]
}

数据接收

data() {
    return {
      tableData: [],
      loading: false
    };
  },
  methods: {
    async fetchData() {
      this.loading = true;
      try {
        const response = await axios.get('/mock/tableData.json');
        this.tableData = response.data.data;
      } catch (error) {
        console.error('获取数据失败', error);
      } finally {
        this.loading = false;
      }
    }
  },
  mounted() {
    this.fetchData();
  }
};

三、逻辑实现

methods:{
    handleSelection(row){
      this.selectRow=row
    },
    handlePrint(){
      // 1.打印模板
      const printTemplate=document.getElementById("printData");
      // 2. 显示打印模板（默认隐藏）
      const originalDisplay = printTemplate.style.display;
      printTemplate.style.display = "block";
      
      // 3. 调用浏览器打印功能
      window.print();
      
      // 4. 恢复模板隐藏状态
      printTemplate.style.display = originalDisplay;
    }
  }

四、样式设置

@media print {
  /* 隐藏类名是tableData和button的组件内容 */
  .tableData, .button {
    display: none !important;
  }
  
  /* 确保在id为printData的组件中显示 */
  #printData {
    display: block !important;
  }
}
h2 {
text-align: center;
 margin: 20px 0;
}

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%;
  margin: 0 auto;
  display: flex;/* 弹性布局实现动态对齐 */
}
th, td {
  border: 1px solid #ddd; /* 单元格边框 */
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f5f5f5; /* 表头灰色背景 */
}

常见的表格布局

基础流式：本实操中的

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
    </tbody>
  </table>
</div>

卡片式布局

<div class="card-container">
  <!-- 每个卡片对应一行数据 -->
  <div class="data-card" v-for="row in tableData" :key="row.id">
    <div class="card-field">
      <span class="field-label">商品名称：</span>
      <span class="field-value">{{ row.name }}</span>
    </div>
    <div class="card-field">
      <span class="field-label">价格：</span>
      <span class="field-value">{{ row.price }}</span>
    </div>
  </div>
</div>


.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自动换行 */
  gap: 15px; /* 卡片间距 */
  padding: 10px;
}
.data-card {
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 卡片阴影 */
  background: #fff;
}

更多布局可参考Bootstrap和elementUI