第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

是否可以將帶有其他 div 元素的 Canvas 打印為 pdf?

是否可以將帶有其他 div 元素的 Canvas 打印為 pdf?

紅顏莎娜 2023-06-09 17:52:31
我一直在嘗試將圖表(畫(huà)布)連同自定義標(biāo)題和圖例(div 元素)一起打印為 pdf 格式,但到目前為止都沒(méi)有成功。我得到了 jspf 庫(kù)和 html2canvas,但沒(méi)有任何效果。這是我嘗試過(guò)的代碼片段:$('#print-chart-btn-donut').on('click', function () {var canvas = document.querySelector('#' + chart_name_donut + '_Chart');var canvas_img = canvas.toDataURL("image/png", 1.0); //JPEG will not match background colorvar doc = new jsPDF('landscape', 'in', 'letter');html2canvas(document.getElementById(chart_name_donut + "_Title"), {    onrendered: function (canvas) {        html2canvas(document.getElementById(chart_name_donut + "_LegendContainer"), {            onrendered: function (canvas2) {                var img = canvas.toDataURL("image/png");                                doc.addImage(img, 'png', -4.25, 2, 20, 4, 'Doughnut1', 0, 0);                var img2 = canvas2.toDataURL("image/png");                doc.addImage(img2, 'png', -4.25, 1.75, 20, 4, 'Doughnut2', 0, 0);            }        })    }});doc.addImage(canvas_img, 'png', -4.25, 1.75, 20, 4, 'Doughnut', 0, 0);doc.autoPrint();var blob = doc.output("bloburl");window.open(blob, 'Doughnut Chart', "height=" + window.outerHeight + ", width=" + 0.36 * window.innerWidth + "\"");});使用此代碼,它會(huì)生成僅包含原始畫(huà)布元素(在本例中為 canvas_img)的 pdf。有誰(shuí)知道一個(gè)好的解決方案?
查看完整描述

1 回答

?
胡說(shuō)叔叔

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超8個(gè)贊

看來(lái)您可能需要研究 Javascript 回調(diào)。回調(diào)onrendered不會(huì)立即發(fā)生,它們會(huì)在操作完成后執(zhí)行。


您應(yīng)該將最后 3 行移到最后一個(gè)嵌套o(hù)nrendered回調(diào)中。通過(guò)此更改,將在 html2canvas 渲染發(fā)生后生成 PDF。


$('#print-chart-btn-donut').on('click', function() {


    var canvas = document.querySelector('#' + chart_name_donut + '_Chart');

    var canvas_img = canvas.toDataURL("image/png", 1.0); //JPEG will not match background color


    var doc = new jsPDF('landscape', 'in', 'letter');

    html2canvas(document.getElementById(chart_name_donut + "_Title"), {

        onrendered: function(canvas) {

            html2canvas(document.getElementById(chart_name_donut + "_LegendContainer"), {

                onrendered: function(canvas2) {

                    var img = canvas.toDataURL("image/png");


                    doc.addImage(img, 'png', -4.25, 2, 20, 4, 'Doughnut1', 0, 0);

                    var img2 = canvas2.toDataURL("image/png");

                    doc.addImage(img2, 'png', -4.25, 1.75, 20, 4, 'Doughnut2', 0, 0);


                    // Generate the PDF after the final callback has executed

                    doc.autoPrint();

                    var blob = doc.output("bloburl");

                    window.open(blob, 'Doughnut Chart', "height=" + window.outerHeight + ", width=" + 0.36 * window.innerWidth + "\"");

                }

            })

        }

    });

    doc.addImage(canvas_img, 'png', -4.25, 1.75, 20, 4, 'Doughnut', 0, 0);

});


查看完整回答
反對(duì) 回復(fù) 2023-06-09
  • 1 回答
  • 0 關(guān)注
  • 186 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)