Not allowed to navigate top frame to data URL: JsPDF

问题

try {
    var a;
    var b = new jsPDF("p", "pt", "a3");
    var c = document.getElementById("leftPieCanvas").toDataURL("image/png");
    b.addImage(c, "PNG", 265, 60);
    a = document.getElementById("rightPieCanvas").toDataURL("image/png");
    b.addImage(a, "PNG", 205, 440);
    if ($("#sales_table").length) {
        var d = tableToJson($("#sales_table").get(0));
        b.setFont("helvetica");
        b.setFontType("bold");
        b.setFontSize(9);
        $.each(d, function(a, c) {
            $.each(c, function(c, d) {
                b.cell(40, 830, 55, 20, d, a);
            });
        });
    }
    b.output("dataurlnewwindow");
} catch (e) {
    alert(e);
}

Above code is working in firefox but not in chrome, i googled and got suggestions that use iframe so i have created iframe but unable to put this code in above code, anyone can suggest please that how do i add the below code into above code so i can render a PDF in google chrome also.

var html = '<html>' +
      '<style>html, body { padding: 0; margin: 0; } iframe { width: 100%; height: 100%; border: 0;}  </style>' +
      '<body>' +
      '<iframe src="' + url + '"></iframe>' +
      '</body></html>';

回答1:

    try {
    var a;
    var b = new jsPDF("p", "pt", "a3");
    var c = document.getElementById("leftPieCanvas").toDataURL("image/png");
    b.addImage(c, "PNG", 265, 60);
    a = document.getElementById("rightPieCanvas").toDataURL("image/png");
    b.addImage(a, "PNG", 205, 440);
    if ($("#sales_table").length) {
        var d = tableToJson($("#sales_table").get(0));
        b.setFont("helvetica");
        b.setFontType("bold");
        b.setFontSize(9);
        $.each(d, function(a, c) {
            $.each(c, function(c, d) {
                b.cell(40, 830, 55, 20, d, a);
            });
        });
    }
    //b.output('dataurlnewwindow');
    var uri = b.output('dataurlstring');
    openDataUriWindow(uri);
} catch (e) {
    alert(e);
}


function openDataUriWindow(url) {
    var html = '<html>' +
        '<style>html, body { padding: 0; margin: 0; } iframe { width: 100%; height: 100%; border: 0;}  </style>' +
        '<body>' +
        '<iframe src="' + url + '"></iframe>' +
        '</body></html>';
    a = window.open();
    a.document.write(html);
}

回答2:

In pure javascript, maybe like this works:

html: <object id="obj" type="application/pdf"> </object>

js: document.getElementById('obj').data = doc.output("datauristring");

please, try correct me if I wrong.

回答3:

<iframe id="ManualFrame"
        frameborder="0"
        style="border:0"
        allowfullscreen>
</iframe>

<script>
    $(function () {
        setManualFrame();
    });

    function setManualFrame() {
        $("#ManualFrame").attr("height", screen.height);
        $("#ManualFrame").attr("width", screen.width);
        $("#ManualFrame").attr("src", "data:application/pdf;base64," + Your_PDF_Data);
    }
</script>

来源：https://stackoverflow.com/questions/45649105/not-allowed-to-navigate-top-frame-to-data-url-jspdf

标签

javascript

jquery

html

iframe

jspdf