如何在React Grid Table每行设置PDF下载列及对应链接

你配置的Report列显示为空，核心是两个写法问题：

• 列配置的name属性默认会匹配行数据的同名字段作为e.value，你设置了name: "Download"，但实际行数据里没有这个字段，渲染时拿到的e.value是undefined，a标签既无有效链接地址，也无显示文本，自然渲染为空。
• 注释掉的onClick写法没有绑定当前行上下文，触发方法时无法定位到要下载哪一行的PDF文件。

注意：React Grid Table的自定义Cell渲染参数中，row字段对应当前行的完整数据，是实现行级操作的核心

根据你的下载场景二选一即可：

场景1：行数据已包含PDF直链 #

如果每行数据里已经存了对应PDF的可访问地址（比如字段名为pdfUrl），直接渲染带下载属性的a标签即可：

const [columns] = useState([
  {
    name: "downloadAction", // 操作列无对应数据字段时，保证name和其他列不重复即可
    title: 'Report',
    Cell: ({ row }) => (
      <a 
        href={row.pdfUrl}
        download={`数据报告-${row.reportId}.pdf`} // 自定义下载后的文件名
        target="_blank"
        rel="noopener noreferrer"
      >
        下载PDF
      </a>
    )
  },
  // 其余原有列配置保持不变
]);

场景2：需要触发自定义下载逻辑 #

如果PDF是接口返回二进制流、或前端动态生成的，需要绑定点击事件触发下载方法，记得把当前行数据传入方法：

// 行PDF下载逻辑
const handleDownloadPdf = async (currentRow) => {
  // 此处替换为你的实际下载逻辑，比如调用接口、前端生成PDF等
  // 示例：接口返回二进制流下载
  // const res = await fetch(`/api/report/pdf/${currentRow.reportId}`);
  // const blob = await res.blob();
  // const blobUrl = window.URL.createObjectURL(blob);
  // const tempLink = document.createElement('a');
  // tempLink.href = blobUrl;
  // tempLink.download = `数据报告-${currentRow.reportId}.pdf`;
  // tempLink.click();
  // window.URL.revokeObjectURL(blobUrl);
};

const [columns] = useState([
  {
    name: "downloadAction",
    title: 'Report',
    Cell: ({ row }) => (
      <a 
        href="javascript:;" 
        onClick={() => handleDownloadPdf(row)}
        style={{ color: '#1677ff', cursor: 'pointer' }}
      >
        下载PDF
      </a>
    )
  },
  // 其余原有列配置保持不变
]);

• 不建议给点击触发事件的a标签设href="#"，如果忘记阻止默认行为，点击后会自动跳转到页面顶部，替换为href="javascript:;"更稳妥。
• 跨域资源链接配置download属性会失效，这种场景建议通过后端接口转发为同域二进制流的方式实现下载。

内容的提问来源于stack exchange，提问作者Infa Teenu