如何实现打印功能

一、AI赋能提供思路

基本框架

  
退货单打印内容
  

二、具体实操

1.实现显示页面

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

      打印
    
    

      
        
        
        
        
        
        
        
      
    
    

      
库存表格
      

        

          

            
序号
            
名字
            
种类
            
价格
            
库存
            
时间
          
        
        

          

            
{{ index+1 }}
            
{{ row.name }}
            
{{ row.category }}
            
{{ row.price }}
            
{{ row.stock }}
            
{{ row.date }}
          
        
      
    

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; /* 表头灰色背景 */
}

常见的表格布局

基础流式：本实操中的

  

    

      

        
列1
        
列2
        
列3
      
    
    

      
数据1
数据2
数据3
    
  

卡片式布局

  
  

    

      商品名称：
      {{ row.name }}
    
    

      价格：
      {{ row.price }}
    
  



.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