如何实现打印功能

一、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