从iframe创建PDF文件

Question

从iframe创建PDF文件

9

我想保存一个包含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');
}

有人知道出了什么问题，我该如何解决吗？

- John

仍未修复。 - John

你能否创建一个 JSFiddle 或等效的工具，将你的整个代码放入其中，而不仅仅是框架？ - nitobuendia

"specialElementHandlers"是什么作用？乍一看，它似乎是要忽略所有的“div”元素。这对于捕获您的内容可能不太健康？您内容中的第一个元素是** div class ="content" **。 - Vanquished Wombat

2个回答

2

看起来这个问题在Github上仍然是一个公开的问题，自2015年以来一直未解决。请参见https://github.com/MrRio/jsPDF/issues/496。也许没有解决方案。

此外，在您调用的jsPDFAPI.fromHTML函数之前，源代码中有以下注释。请注意最后一个关于表格的点可能会影响您的工作。

* Converts HTML-formatted text into formatted PDF text.
*
* Notes:
* 2012-07-18
* Plugin relies on having browser, DOM around. The HTML is pushed into dom and traversed.
* Plugin relies on jQuery for CSS extraction.
* Targeting HTML output from Markdown templating, which is a very simple
* markup - div, span, em, strong, p. No br-based paragraph separation supported explicitly (but still may work.)
* Images, tables are NOT supported.

此外，我试图在这里和jsfiddle上设置工作范例，但无法使jsPDF.fromHTML正常工作。我不是jsPDF专家，但我有一定经验，我认为jsPDF并不是非常强大-您可能需要扩大搜索范围，找到另一个插件。这只是我的个人观点。

- Vanquished Wombat

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Nguyen · Accepted Answer

要从 iframe 中打印 HTML，您需要获取来自 iframe 的内容。以下是从此处获取的源代码示例，可用于获取 iframe 内容：

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（跨域资源共享）仍然是一个问题。为了解决它，您可以创建 Web 服务器并将您的 HTML 代码和iframe src放在其中，看看它是如何工作的。