javascript - 从 iframe 创建 PDF 文件

Question

我想保存一个包含 IFrame 内容的 PDF 文件。我正在为此使用 jsPDF。当我点击调用函数的按钮时，脚本会创建一个空的 PDF 页面。

框架的内容如下:https://jsfiddle.net/ss6780qn/

我正在使用以下脚本:

<script src="../jspdf/plugins/standard_fonts_metrics.js"></script>
<script type="text/javascript">
function toPDF(){       
        var pdf = new jsPDF('p', 'in', 'letter');

    // source can be HTML-formatted string, or a reference
    // to an actual DOM element from which the text will be scraped.
    source = $('#frame')[0]

    // we support special element handlers. Register them with jQuery-style 
    // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
    // There is no support for any other type of selectors 
    // (class, of compound) at this time.
    specialElementHandlers = {
        // element with id of "bypass" - jQuery style selector
        'div': function(element, renderer){
            // true = "handled elsewhere, bypass text extraction"
            return true
        }
    }

    // all coords and widths are in jsPDF instance's declared units
    // 'inches' in this case
    pdf.fromHTML(
        source // HTML string or DOM elem ref.
        , 0.5 // x coord
        , 0.5 // y coord
        , {
            'width':7.5 // max width of content on PDF
             ,'elementHandlers': specialElementHandlers
        }
    )

    pdf.save('Test.pdf');
}

有人知道哪里出了问题以及我该如何解决吗？

Answer 1

要从 iframe 中打印 html，您需要从 iframe 中获取内容。从 iframe 获取内容的源代码(我从 this 获取):

function getFrameContents() {
    var iFrame = document.getElementById('frame');
    var iFrameBody;
    if (iFrame.contentDocument) { // FF
        iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
    } else if (iFrame.contentWindow) { // IE
        iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
    }
    //alert(iFrameBody.innerHTML);
    return iFrameBody.innerHTML
}

所以你替换:

source = $('#frame')[0]

与

source = getFrameContents();

或者使用 jQuery 简单:

source = $("#frame").contents().find('body')[0];

但是，仍然存在关于 CORS(跨源资源共享)的问题。要解决它，您可以创建网络服务器并将 html 代码和 iframe src 放在那里，看看它是如何工作的。