方案一、
const exportToPDF = () => {const element = document.getElementById('chart-container');if (!element) return;const originalScrollHeight = element.scrollHeight;// 临时解除滚动条限制，确保所有内容都可见element.style.height = `${originalScrollHeight}px`;// 使用html2canvas将元素转换为Canvashtml2canvas(element).then(canvas => {// 恢复元素的原始样式element.style.overflow = 'auto';element.style.height = '';// 创建一个新的jsPDF实例const pdf = new jsPDF('p', 'mm', 'a4');// 将Canvas内容添加到PDFconst imgData = canvas.toDataURL('image/png', 1.0);const pdfWidth = pdf.internal.pageSize.getWidth();const pdfHeight = pdf.internal.pageSize.getHeight();const imgProps = pdf.getImageProperties(imgData);const scale = Math.min(pdfWidth / imgProps.width, pdfHeight / imgProps.height);const width = imgProps.width * scale;const height = imgProps.height * scale;// 添加图片到PDF，可能需要调整位置和尺寸以适应页面pdf.addImage(imgData, 'PNG', 0, 0, width, height);// 保存PDFpdf.save('exported.pdf');});};
方案二、
安装react-to-print
import { useReactToPrint } from 'react-to-print';const exportToPDF = useReactToPrint({content: () => document.getElementById('chart-container'),pageStyle: `@page {size: A4;margin: 20mm;}@media print {body {visibility: hidden;}#chart-container {visibility: visible;position: absolute;top: 0;left: 0;width: 100%;height: auto;}}`,});
并且在要导出的页面、图表等添加CSS样式 page-break-inside: avoid;这样保证分页时，不会将内容切割，导致内容不连续完整；也可以实现不需要预览要导出的页面，设置visibility: hidden;页面也是正常导出的。
如果遇到图表或者内容导出不全问题，修改内容的样式，整体设置一个宽度，我这是A4纸的宽度，即导出页面宽度加上样式210mm。
弊端：导出窗口无法修改位置、样式等等，和window.print();调起一样，是浏览器控制的。
总儿言之：
导出的时候需要将元素的高度改成页面完全渲染出的高度，确保所有内容是可见的；导出后再将高度修改成原来的样子；
但是这块有个高度变化的过程效果不是很好，并且该方法适用单页PDF导出；如果涉及到分页，不建议从前端做（分页、内容不被分页切割），或者选择方案二。
已知：
给元素设置visibility: ‘hidden’、position: ‘absolute’、opacity: 0；会导致导出的pdf是空白的；可能是插件不支持这些样式设置。
如有更好的方式及插件，欢迎分享（前端实现）。