当前位置：首页 > React

react如何导出

2026-02-11 15:19:35React

在React中导出组件或数据

React中导出内容主要涉及模块化开发，通过export关键字实现。以下是常见的导出方式：

导出单个组件

// MyComponent.js
const MyComponent = () => <div>Hello World</div>;
export default MyComponent;

命名导出多个组件

// components.js
export const Button = () => <button>Click</button>;
export const Input = () => <input type="text" />;

混合导出方式

react如何导出

// utils.js
const helper = () => {/*...*/};
const CONSTANT = 42;

export { helper, CONSTANT };
export default mainFunction;

导出为PDF或图片

需要第三方库实现可视化导出功能：

使用react-to-pdf

react如何导出

import { usePDF } from 'react-to-pdf';

const { toPDF, targetRef } = usePDF();
<button onClick={() => toPDF()}>Export PDF</button>
<div ref={targetRef}>{/* 要导出的内容 */}</div>

使用html2canvas + jsPDF

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

const exportAsPDF = () => {
  html2canvas(document.getElementById('export-area')).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF();
    pdf.addImage(imgData, 'PNG', 0, 0);
    pdf.save('download.pdf');
  });
}

导出Excel/CSV数据

使用xlsx库

import * as XLSX from 'xlsx';

const exportExcel = (data) => {
  const ws = XLSX.utils.json_to_sheet(data);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  XLSX.writeFile(wb, "data.xlsx");
}

纯前端CSV导出

const exportCSV = (data) => {
  const csvContent = data.map(row => Object.values(row).join(',')).join('\n');
  const blob = new Blob([csvContent], { type: 'text/csv' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'data.csv';
  link.click();
}

标签: react