页面导出PDF,非可视区域如何解决

方案一、

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是空白的;可能是插件不支持这些样式设置。

如有更好的方式及插件,欢迎分享(前端实现)。

相关推荐
Light6018 小时前
领码方案|Linux 下 PLT → PDF 转换服务超级完整版:异步、权限、进度(一气呵成)
linux·spring boot·pdf·gpcl6/ghostpcl·s3/oss·权限与审计·异步与进度
遂心_19 小时前
React useState:20分钟彻底掌握这个让你"状态满满"的Hook
前端·javascript·react.js
伟贤AI之路20 小时前
【分享】中小学教材课本 PDF 资源获取指南
人工智能·pdf
江城开朗的豌豆20 小时前
Axios拦截器:给你的请求加上"双保险"!
前端·javascript·react.js
江城开朗的豌豆20 小时前
解密DVA:React应用的状态管理利器
前端·javascript·react.js
东风西巷1 天前
PDFgear:免费全能的PDF处理工具
前端·pdf·软件需求
xiaopengbc1 天前
在 React 中如何使用 useMemo 和 useCallback 优化性能?
前端·javascript·react.js
伍哥的传说1 天前
React Device Detect 完全指南:构建响应式跨设备应用的最佳实践
react.js·前端框架·react hooks·操作系统识别·device-detect·react设备检测·浏览器检测
GISer_Jing1 天前
React 18 过渡更新:并发渲染的艺术
前端·javascript·react.js