web-dev-qa-db-ja.com

iframeからPDFファイルを作成

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');
}

誰かが何が間違っているのか、どうすればこれを修正できるのか知っていますか？

javascriptpdfjspdf
8
John

この問題については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が非常に堅牢であるとは感じていません。ネットを広くキャストして別のプラグインを見つけたいと思うかもしれません。私の意見です。

2
Vanquished Wombat

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（クロスオリジンリソースシェアリング）についてはまだ問題があります。これを解決するには、Webサーバーを作成し、そこにhtmlコードとiframe srcを配置して、それがどのように機能するかを確認します。

1
Andrew Nguyen