在 Next.js 中添加可下载的电子表格

在基于 React 的 Next.js 应用程序中，添加可下载的电子表格有多种方法。本文将介绍其中两种常见的方式。

方法一：使用react-csv

1. 安装react-csv

npm install react-csv

2. 导入react-csv和csv文件

import { CSVLink } from 'react-csv';
import csvData from '../data.csv';

3. 在需要下载的组件中添加CSVLink组件

<CSVLink data={csvData}>
  下载电子表格
</CSVLink>

完整示例代码可见：

import React from 'react';
import { CSVLink } from 'react-csv';
import csvData from '../data.csv';

const MyComponent = () => {
  return (
    <div>
      <h1>可下载的电子表格</h1>
      <CSVLink data={csvData}>
        下载电子表格
      </CSVLink>
    </div>
  );
};

export default MyComponent;

方法二：使用file-saver

1. 安装file-saver

npm install file-saver

2. 导入file-saver

import { saveAs } from 'file-saver';

3. 定义下载电子表格的函数

const downloadCsv = () => {
  const csvString = '列1,列2,列3\n1,2,3\n4,5,6';
  const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
  saveAs(blob, 'data.csv');
}

4. 在需要下载的组件中添加按钮，并绑定下载函数

<button onClick={downloadCsv}>
  下载电子表格
</button>

完整示例代码可见：

import React from 'react';
import { saveAs } from 'file-saver';

const MyComponent = () => {
  const downloadCsv = () => {
    const csvString = '列1,列2,列3\n1,2,3\n4,5,6';
    const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
    saveAs(blob, 'data.csv');
  }

  return (
    <div>
      <h1>可下载的电子表格</h1>
      <button onClick={downloadCsv}>
        下载电子表格
      </button>
    </div>
  );
};

export default MyComponent;

以上是两种在 Next.js 中添加可下载的电子表格的方法。选择哪种方法取决于具体需求和个人喜好。