react实现页面截图
使用html2canvas库实现截图
html2canvas是一个流行的JavaScript库，可以将网页内容转换为Canvas图像。安装依赖：
npm install html2canvas基础实现代码：
import html2canvas from 'html2canvas';
const captureElement = async (elementId) => {
const element = document.getElementById(elementId);
const canvas = await html2canvas(element);
const image = canvas.toDataURL('image/png');
return image;
};
// 使用示例
const handleCapture = async () => {
const screenshot = await captureElement('target-element');
const link = document.createElement('a');
link.download = 'screenshot.png';
link.href = screenshot;
link.click();
};使用react-screenshot-hook简化实现
这个React Hook封装了html2canvas的功能：
npm install react-screenshot-hook使用示例：
import { useScreenshot } from 'react-screenshot-hook';
function App() {
const { image, takeScreenshot } = useScreenshot();
return (
<div>
<div id="capture-area">
{/* 需要截图的内容 */}
</div>
<button onClick={() => takeScreenshot('#capture-area')}>
截图
</button>
{image && <img src={image} alt="截图预览" />}
</div>
);
}处理跨域资源问题
当页面包含跨域图片时，需要在html2canvas配置中添加allowTaint选项：
const options = {
allowTaint: true,
useCORS: true,
logging: true,
};
const canvas = await html2canvas(element, options);实现全屏截图
通过指定document.body可以截取整个页面：
const captureFullPage = async () => {
const canvas = await html2canvas(document.body, {
scrollY: -window.scrollY,
height: document.body.scrollHeight
});
// 后续处理...
};保存为PDF格式
结合jsPDF库可以将截图转为PDF：
npm install jspdf实现代码：
import { jsPDF } from 'jspdf';
const saveAsPDF = async (elementId) => {
const canvas = await html2canvas(document.getElementById(elementId));
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save('download.pdf');
};性能优化建议
对于复杂页面，可以设置scale参数降低分辨率提高性能：
const canvas = await html2canvas(element, {
scale: 0.75 // 0-1之间的值
});分批渲染大型页面时，使用windowHeight参数分段截图：
const canvas = await html2canvas(element, {
windowHeight: element.scrollHeight
});
