方案一、
javascript
const exportToPDF = () => {
const element = document.getElementById('chart-container');
if (!element) return;
const originalScrollHeight = element.scrollHeight;
// 临时解除滚动条限制,确保所有内容都可见
element.style.height = `${originalScrollHeight}px`;
// 使用html2canvas将元素转换为Canvas
html2canvas(element).then(canvas => {
// 恢复元素的原始样式
element.style.overflow = 'auto';
element.style.height = '';
// 创建一个新的jsPDF实例
const pdf = new jsPDF('p', 'mm', 'a4');
// 将Canvas内容添加到PDF
const 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);
// 保存PDF
pdf.save('exported.pdf');
});
};
方案二、
安装react-to-print
javascript
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是空白的;可能是插件不支持这些样式设置。
如有更好的方式及插件,欢迎分享(前端实现)。