vue实现批量打印

最新推荐文章于 2025-05-07 15:33:23 发布

原创

最新推荐文章于 2025-05-07 15:33:23 发布 · 3.7k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

这是一个关于使用Vue.js实现打印功能的示例。通过遍历tableData列表并为每个条目创建一个独立的打印区域，实现了分页打印的效果。点击‘打印’按钮后，会触发浏览器打印，每个条目之间设置页眉分隔，同时处理图片加载以确保打印质量。请注意，如果tableData中不含图片，则需移除图片加载的相关代码，以避免错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div>
        <ul class="print-ul">
            <li v-for="(item,index) of tableData" :key="index" 
                :id="'printDiv' + index" style="page-break-after:always;">
                <div>
                    <p>{
  
  {item.date}}</p>
                    <p>{
  
  {item.name}}</p>
                    <p>{
  
  {item.province}}</p>
                    <p>{
  
  {item.city}}</p>
                    <p>{
  
  {item.address}}</p>
                    <p>{
  
  {item.zip}}</p>
                </div>
            </li>
        </ul>
        <div @click="handlePrint">打印</div>
    </div