当前位置：首页 > VUE

vue实现导出打印

2026-03-29 16:20:22VUE

Vue 实现导出功能

在Vue中实现导出功能通常涉及将数据转换为文件（如Excel、CSV等）并下载。以下是常见方法：

使用第三方库（如xlsx）导出Excel 安装xlsx库：

npm install xlsx

示例代码：

import * as XLSX from 'xlsx';

export default {
  methods: {
    exportExcel() {
      const data = [
        ['Name', 'Age'],
        ['Alice', 25],
        ['Bob', 30]
      ];
      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");
    }
  }
}

导出CSV文件

exportCSV() {
  const csvContent = "data:text/csv;charset=utf-8,Name,Age\nAlice,25\nBob,30";
  const encodedUri = encodeURI(csvContent);
  const link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "export.csv");
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

Vue 实现打印功能

打印整个页面

printPage() {
  window.print();
}

打印特定区域

<template>
  <div id="printArea">
    <!-- 需要打印的内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    printSpecificArea() {
      const printContent = document.getElementById('printArea').innerHTML;
      const originalContent = document.body.innerHTML;
      document.body.innerHTML = printContent;
      window.print();
      document.body.innerHTML = originalContent;
    }
  }
}
</script>

使用vue-print-nb插件 安装：

npm install vue-print-nb

使用：

vue实现导出打印

import Print from 'vue-print-nb'

Vue.use(Print);

<template>
  <div id="printArea">
    <!-- 需要打印的内容 -->
  </div>
  <button v-print="'#printArea'">打印</button>
</template>