实现Vue导出功能_一教你操作-Excel-这里我们假设数据来自Vue组件

作者：编程小白 | 发布时间：2025-06-20 |

实现Vue导出功能：一步步教你操作

实现Vue的导出功能，主要是四个步骤：引入库、获取数据、创建逻辑、触发导出。

下面，我们详细介绍如何在Vue项目中实现CSV、Excel和PDF格式的导出。

一、引入所需的库

要在Vue项目中实现导出功能，首先需要引入一些第三方库。

格式 使用库 安装命令
CSV file-saver npm install file-saver
Excel exceljs npm install exceljs
PDF jsPDF npm install jspdf

在Vue项目中引入这些库，可以这样写：


import FileSaver from 'file-saver';

import XLSX from 'exceljs';

import jsPDF from 'jspdf';

二、获取导出数据

导出数据通常来源于后端API或前端状态管理工具，比如Vuex。这里，我们假设数据来自Vue组件。

示例数据：


const data = [

  { name: 'Alice', age: 25 },

  { name: 'Bob', age: 30 }

];

三、创建导出逻辑

根据需要导出的文件格式，创建相应的导出逻辑。

格式 代码示例
CSV 

      export function exportToCSV(data) {

        const header = ['Name', 'Age'];

        const rows = data.map(item => [item.name, item.age]);

        const csvContent = [header, ...rows].map(e => e.join(',')).join('\n');

        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });

        FileSaver.saveAs(blob, 'export.csv');

      }
Excel 

      export function exportToExcel(data) {

        const workbook = new Excel.Workbook();

        const worksheet = workbook.addWorksheet('MySheet');

        worksheet.columns = [

          { header: 'Name', key: 'name', width: 30 },

          { header: 'Age', key: 'age', width: 10 }

        ];

        worksheet.addRows(data);

        workbook.xlsx.writeFile('export.xlsx');

      }
PDF 

      export function exportToPDF(data) {

        const doc = new jsPDF();

        doc.text('Name, Age', 10, 10);

        data.forEach(item => {

          doc.text(`${item.name}, ${item.age}`, 10, 20);

        });

        doc.save('export.pdf');

      }

四、触发导出功能

在Vue模板中添加按钮，绑定相应的导出方法。

你就可以在Vue项目中实现不同格式的导出功能了。