How to drag and drop react. How to generate PDF from HTML React

随着前端框架 React 在企业级项目中的广泛应用，开发者对组件交互与文档生成的需求日益迫切。近期，围绕「如何在 React 中实现拖放操作」以及「如何从 React 渲染的 HTML 生成 PDF」两大技术点，社区涌现出多种高效方案，为 Web 应用的用户体验与办公自动化提供了强有力支持。本文将深入解析这两项功能的实现路径，帮助开发者快速上手。

一、React 拖放：从原生 API 到成熟库

拖放（Drag and Drop）是交互设计中的重要环节，常用于任务看板、文件管理器、可排序列表等场景。React 生态中实现拖放主要有两条路线：原生 HTML5 拖放 API 和第三方专用库。

1. 基于 HTML5 拖放 API 的轻量实现

HTML5 的 drag 和 drop 事件可以直接在 React 中绑定。通过 onDragStart、onDragOver、onDrop 等回调，开发者能控制拖拽源与放置目标的行为。例如，在组件中维护状态记录被拖拽项，并在 onDrop 中更新列表数据。这种方式无需额外依赖，适合简单场景，但需手动处理浏览器兼容性、触摸设备支持等问题。

2. 专用库：React DnD 与 react-beautiful-dnd

对于复杂交互，推荐使用成熟的拖放库。其中 React DnD 提供了灵活的数据源与放置目标抽象，支持鼠标、触控等多输入模式，并通过“监视器”实时反馈拖拽状态。而 react-beautiful-dnd 以其出色的动画和可访问性著称，专为列表级拖放设计，内置自动滚动、拖拽手柄等特性，广泛应用于 Trello 类产品。

示例：使用 react-beautiful-dnd 实现可排序列表仅需三步：包裹 <DragDropContext>，为每个列表添加 <Droppable>，为每个项目包裹 <Draggable>。状态管理则交给 React 的 useState 或 Redux。社区已提供大量教程，开发者可快速克隆模板。

二、从 HTML 生成 PDF：React 方案的突破

将网页内容导出为 PDF 是文档打印、报表生成、发票下载等场景的基础需求。传统方式依赖浏览器打印或服务端 Puppeteer，但在 React 中，前端直接生成 PDF 已成为现实，主要借助以下工具：

1. html2canvas + jsPDF 组合

这是最经典的方案：先用 html2canvas 将 React 组件渲染为 Canvas 图像，再利用 jsPDF 将图像插入 PDF 页面。该方法适用于对样式保真度要求高的场景，但缺点是生成的是图片型 PDF，文本不可选中，且大页面可能性能不佳。

2. React-PDF 与 @react-pdf/renderer

若想生成原生 PDF 文档（文字可搜索、可复制），推荐使用 @react-pdf/renderer。该库提供 <Document>、<Page>、<View>、<Text> 等 React 组件，允许开发者以声明式语法直接构建 PDF。例如：

import { Document, Page, Text, View } from '@react-pdf/renderer';
const MyDoc = () => (
  <Document>
    <Page>
      <View><Text>Hello PDF!</Text></View>
    </Page>
  </Document>
);

这种方式完全脱离真实 DOM，路由和样式需要单独定义，适合数据驱动的报表生成。

3. 新的趋势：基于 Puppeteer 的云服务

对于复杂富文本或交互式图表，前端方案有限。不少团队转向无头浏览器服务（如 Browserless、PageRenderer），在服务器端渲染 React 组件后，由 Puppeteer 生成 PDF。虽然需要网络或后端支持，但可确保像素级精度，且支持 CSS 打印样式。

三、实战建议与选型考量

在选择拖放方案时，若项目仅需简单的列表排序，原生 API 或 react-beautiful-dnd 足矣；若涉及跨容器、自定义拖拽预览等高级交互，React DnD 更灵活。对于 PDF 生成，如果对文本可搜索性要求不高，html2canvas+jsPDF 最易上手；若需高质量原生 PDF，@react-pdf/renderer 是最佳选择；对于既包含动态图表又需要可复制文本的复杂页面，则推荐服务端渲染方案。

四、展望：前端工程化的新边界

React 社区对用户体验和文档自动化的探索从未停止。随着 Web 标准（如 CSS 打印媒体、文件系统 API）的演进，以及开源库的持续优化，拖放操作和 PDF 生成的实现成本正在降低。开发者只需依据业务场景精准选型，即可为应用赋予更强大的交互性与输出能力。

未来，我们期待看到更多像 react-dnd-accessible 一样兼顾无障碍的拖放库，以及支持流式布局和复杂表格的 PDF 生成框架。掌握这些技术，将帮助团队在「前端即全栈」的时代中，更快交付高价值功能。