使用Kendo UI导出PDF时如何添加额外PDF？iframe嵌入不生效怎么解决

需求可行性说明 #

可以实现。你当前用iframe/embed/object标签嵌入PDF不生效的核心原因是：Kendo UI的drawDOM方法仅会解析当前页面的可见HTML DOM元素生成PDF，iframe等标签嵌入的PDF属于浏览器独立渲染的内容，不属于当前页面DOM树的可解析元素，因此无法被识别导出。

可行实现方案 #

方案1：前端侧合并PDF（适合小体积外部PDF场景） #

借助pdf-lib前端PDF处理库，先导出Kendo生成的主PDF内容，再加载外部URL的PDF，合并完成后再触发下载，修改后的JS代码如下：

// 提前引入pdf-lib库，可通过npm安装或静态资源引入
import { PDFDocument } from 'pdf-lib';

$(document).ready(function() {
    kendo.drawing.drawDOM($('.content'))
        .then(function(group) {
            return kendo.drawing.exportPDF(group, {
                paperSize: 'auto',
                margin: { left: '1cm', top: '1cm', right: '1cm', bottom: '1cm' }
            });
        })
        .done(async function(kendoPdfData) {
            // 加载Kendo导出的主PDF内容
            const mainPdf = await PDFDocument.load(atob(kendoPdfData.split(',')[1]));
            // 加载外部PDF，需确保外部PDF地址配置了CORS允许当前站点访问
            const externalPdfRes = await fetch('{{$inspection->pdf_report_url}}');
            const externalPdfBuf = await externalPdfRes.arrayBuffer();
            const externalPdf = await PDFDocument.load(externalPdfBuf);
            // 复制外部PDF所有页追加到主PDF末尾
            const externalPages = await mainPdf.copyPages(externalPdf, externalPdf.getPageIndices());
            externalPages.forEach(page => mainPdf.addPage(page));
            // 导出合并后的PDF触发下载
            const mergedPdfBytes = await mainPdf.save();
            const mergedPdfBase64 = btoa(String.fromCharCode(...new Uint8Array(mergedPdfBytes)));
            kendo.saveAs({
                dataURI: `data:application/pdf;base64,${mergedPdfBase64}`,
                filename: "<?php echo 'inspections-report'.$inspection->id.'.pdf'; ?>"
            });
            window.close();
        });
});

注意事项：

• 外部PDF的服务端必须配置CORS规则，允许当前业务站点跨域请求PDF资源
• 外部PDF体积不要超过10MB，否则前端合并可能出现卡顿、内存溢出问题

方案2：后端侧合并PDF（生产环境优先选择） #

后端合并稳定性更高，无需处理前端跨域问题，适配大体积PDF场景，实现逻辑如下：

1. 前端保留原有Kendo导出逻辑，拿到生成的PDF的base64内容后，连同外部PDF的URL一起传给后端接口
2. 后端使用对应语言的PDF处理库完成合并：PHP可使用FPDI/TCPDF、Java可使用iText、Python可使用PyPDF2
3. 后端将合并完成的PDF文件流返回给前端触发下载

内容的提问来源于stack exchange，提问作者Leon Raicevic