当前位置：首页 > VUE

vue实现导出打印

2026-01-16 23:43:52VUE

Vue实现导出功能

使用xlsx库可以实现Excel导出功能。安装依赖后，在Vue组件中引入并使用。

vue实现导出打印

npm install xlsx

在Vue组件中实现导出逻辑：

vue实现导出打印

import XLSX from 'xlsx';

export default {
  methods: {
    exportToExcel() {
      const data = [
        ['Name', 'Age', 'Email'],
        ['John', 25, 'john@example.com'],
        ['Jane', 30, 'jane@example.com']
      ];

      const ws = XLSX.utils.aoa_to_sheet(data);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      XLSX.writeFile(wb, 'export.xlsx');
    }
  }
}

Vue实现打印功能

使用浏览器原生打印API实现打印功能。

export default {
  methods: {
    printContent() {
      const printContent = document.getElementById('printable-area').innerHTML;
      const originalContent = document.body.innerHTML;

      document.body.innerHTML = printContent;
      window.print();
      document.body.innerHTML = originalContent;
    }
  }
}

结合导出和打印的完整示例

<template>
  <div>
    <div id="printable-area">
      <table>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Email</th>
        </tr>
        <tr v-for="item in data" :key="item.name">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.email }}</td>
        </tr>
      </table>
    </div>

    <button @click="exportToExcel">导出Excel</button>
    <button @click="printContent">打印</button>
  </div>
</template>

<script>
import XLSX from 'xlsx';

export default {
  data() {
    return {
      data: [
        { name: 'John', age: 25, email: 'john@example.com' },
        { name: 'Jane', age: 30, email: 'jane@example.com' }
      ]
    }
  },
  methods: {
    exportToExcel() {
      const exportData = [
        ['Name', 'Age', 'Email'],
        ...this.data.map(item => [item.name, item.age, item.email])
      ];

      const ws = XLSX.utils.aoa_to_sheet(exportData);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      XLSX.writeFile(wb, 'export.xlsx');
    },
    printContent() {
      const printContent = document.getElementById('printable-area').innerHTML;
      const originalContent = document.body.innerHTML;

      document.body.innerHTML = printContent;
      window.print();
      document.body.innerHTML = originalContent;
    }
  }
}
</script>