如何在Next.js的一个组件中调用另一个组件的方法？

你遇到的核心问题是需要在两个组件（页面）之间复用PDF导出逻辑，且要避免DOM元素不存在导致的调用失败。以下是具体实现方案：

第一步：抽离复用的PDF导出逻辑 #

将exportPdf函数从组件中独立出来，放到单独的工具文件里，让两个组件都能导入使用。

创建utils/pdfUtils.ts文件：

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

export const exportPdf = (elementId: string) => {
  const input = document.getElementById(elementId);
  if (!input) {
    console.error(`无法找到ID为${elementId}的DOM元素`);
    return;
  }
  
  html2canvas(input).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF('p', 'pt', 'a4');
    pdf.addImage(imgData, 'JPEG', 0, 0, 450, 450);
    pdf.save('result.pdf');
  });
};

第二步：修改第一个页面（重命名为ScorecardPage.tsx） #

导入工具函数，替换原有的导出逻辑：

import { NextPage } from 'next';
import { exportPdf } from '../utils/pdfUtils';

const ScorecardPage: NextPage = () => {
  return (
    <div className='scorecard-container' id="scorecard">
      <button className="scr-primary" onClick={() => exportPdf('scorecard')}>
        <a>Save and Download</a>
      </button>
    </div>
  );
};

export default ScorecardPage;

第三步：修改第二个页面（重命名为ResultTablePage.tsx） #

根据你的使用场景选择对应实现：

场景1：两个组件在同一个页面渲染 #

直接导入工具函数和第一个组件，确保DOM中存在#scorecard元素：

import { NextPage } from 'next';
import { exportPdf } from '../utils/pdfUtils';
import ScorecardPage from './ScorecardPage';

const ResultTablePage: NextPage = () => {
  return (
    <>
      <ScorecardPage />
      <div className='table-container'>
        <table className="table">
          <thead>
            <tr>
              <th scope="col" className='result_head'>Name</th>
              <th scope="col">Mobile</th>
              <th scope="col">Experience</th>
              <th scope="col">Score</th>
              <th scope="col">Interviewer</th>
              <th scope="col">Date</th>
              <th scope="col">Status</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th className='table_head'>Laura Norda</th>
              <td>0000 000 000</td>
              <td>16</td>
              <td>84</td>
              <td>Krishnanunny Mangalasseri</td>
              <td>July 29, 2022</td>
              <td><a>Selected</a></td>
              <td 
                onClick={() => exportPdf('scorecard')} 
                style={{cursor: 'pointer', color: 'blue'}}
              >
                Download
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </>
  );
};

export default ResultTablePage;

场景2：两个组件为独立路由页面 #

如果第二个页面要下载第一个页面的内容，需要通过路由参数触发第一个页面自动导出：

1. 修改第二个页面的Download按钮：

<td>
  <a href="/scorecard?download=true" style={{color: 'blue'}}>Download</a>
</td>

2. 修改第一个页面，监听路由参数自动导出：

import { NextPage } from 'next';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import { exportPdf } from '../utils/pdfUtils';

const ScorecardPage: NextPage = () => {
  const router = useRouter();

  useEffect(() => {
    // 等待DOM渲染完成后触发导出
    if (router.query.download === 'true') {
      setTimeout(() => exportPdf('scorecard'), 100);
    }
  }, [router.query]);

  return (
    <div className='scorecard-container' id="scorecard">
      <button className="scr-primary" onClick={() => exportPdf('scorecard')}>
        <a>Save and Download</a>
      </button>
    </div>
  );
};

export default ScorecardPage;

注意事项 #

1. 两个页面不能都命名为Home，必须重命名避免路由冲突；
2. 确保已安装依赖：npm install html2canvas jspdf；
3. 跨页面调用时，必须保证目标DOM元素存在，否则会触发错误提示。

内容的提问来源于stack exchange，提问作者Aryan Yadav