vue中实现自定义打印功能

本文介绍了如何在Vue应用中使用axios获取后端数据,然后通过封装的printToTable.js函数,实现表格内容的打印预览,允许用户自定义样式和标题。
摘要由CSDN通过智能技术生成

直接上图

点击打印按钮,直接调用浏览器的打印预览功能
在这里插入图片描述
在这里插入图片描述
在预览功能中可以设置表格的样式以及字段等

上代码

<template>
<div>
  <el-button style="text-align: left" type="success" @click="printTable">打印表格</el-button>
  <el-table :data="tableData">
    <!--表格内容-->
  </el-table>
</div>
</template>

封装好的 printToTable.js 放在文章的最下方

<script>
import { printToTable } from '@/assets/js/PrintToTable'
import axios from 'axios'

export default {
  data () {
    return {
      // 后端请求的数据
      tableData: []
    }
  },
  mounted () {
    this.queryList()
  },
  methods: {
    queryList () {
      axios.get('后端请求的接口')
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.list
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    printTable () {
      // 打印的表格内容
      const tableContent = `
        <table>
        <thead>
        <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>部门</th>
        <th>电话</th>
        <th>创建时间</th>
        <th>更新时间</th>
        <th>状态</th>
        </tr>
        </thead>
        <tbody>
        ${this.tableData.map(item => `
        <tr>
        <td>${item.id}</td>
        <td>${item.username === null ? '' : item.username}</td>
        <td>${item.age === null ? '' : item.age}</td>
        <td>${item.sex === null ? '' : item.sex}</td>
        <td>${item.department === null ? '' : item.department}</td>
        <td>${item.phone === null ? '' : item.phone}</td>
        <td>${item.createDate === null ? '' : item.createDate}</td>
        <td>${item.updateDate === null ? '' : item.updateDate}</td>
        <td>${item.status === null ? '' : item.status}</td>
        </tr>
        `).join('')}
        </tbody>
        </table>
        `

      const tableTitle = '信息表'

      printToTable(tableContent, tableTitle)
    }
  }
}
</script>

printToTable.js 相关代码

export const printToTable = (tableContent, tableTitle) => {
  // 创建一个新的窗口用于打印
  const newWindow = window.open('', '_blank')

  // 打印的表格样式
  const tableStyle = `
    <style>
      table {
        width: 100%;
        height: 100%;
        border-collapse: collapse;
      }
     td {
        border: 1px solid black;
        text-align: center;
        min-width: 90px;
        max-width: 150px;
        /*max-height: 400px;*/
        font-size: 14px;
      }
      th {
        border: 1px solid black;
        background-color: #be0000;
        color: white;
      }
      .print-title {
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
      }
    </style>
  `

  // 将表格内容写入新窗口中
  newWindow.document.write('<html lang="en"><head><title>BTC</title>')
  // newWindow.document.write('<html><head>')
  newWindow.document.write(tableStyle)
  newWindow.document.write('</head><body>')
  newWindow.document.write(`<div class="print-title">${tableTitle}</div>`)
  newWindow.document.write(tableContent)
  newWindow.document.write('</body></html>')

  // 打印新窗口中的内容
  newWindow.print()

  // 关闭新窗口
  newWindow.close()
}

  • 8
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
实现Vue页面表格数据的打印功能,你可以按照以下步骤进行操作: 1. 在Vue组件定义表格数据,并将其渲染到页面上。你可以使用Vue的数据绑定和循环指令(如v-for)来展示表格数据。 2. 在页面上添加一个打印按钮或其他触发打印的元素。当用户点击该按钮时,触发一个事件处理函数。 3. 在事件处理函数,可以使用JavaScript的window.print()方法来触发浏览器的打印功能。 4. 在打印之前,你可能需要对表格进行一些样式调整,以确保打印效果符合预期。你可以使用CSS的@media打印样式来控制页面在打印时的显示,例如隐藏不需要打印的元素、调整表格样式等。可以在Vue组件通过计算属性或者样式绑定来动态控制打印样式。 以下是一个示例代码: ```html <template> <div> <table> <thead> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody> <tr v-for="item in tableData" :key="item.id"> <td>{{ item.name }}</td> <td>{{ item.email }}</td> <td>{{ item.phone }}</td> </tr> </tbody> </table> <button @click="printTable">Print</button> </div> </template> <script> export default { data() { return { tableData: [ { id: 1, name: 'John Doe', email: 'john@example.com', phone: '1234567890' }, { id: 2, name: 'Jane Smith', email: 'jane@example.com', phone: '0987654321' }, // 更多表格数据... ] } }, methods: { printTable() { window.print(); } } } </script> ``` 这个示例Vue组件定义了一个`tableData`数组来存储表格数据,并使用`v-for`指令将数据渲染到页面的表格。点击"Print"按钮时,会触发`printTable`方法,从而调用`window.print()`来触发浏览器的打印功能。 你可以根据自己的需求和表格结构进行相应的调整和扩展。另外,如果需要更复杂的打印功能,你还可以考虑使用第三方库或自定义打印样式来实现

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梳碧湖的砍柴少年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值