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

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

紅顏莎娜 2023-06-09 17:52:31
我一直在嘗試將圖表(畫布)連同自定義標(biāo)題和圖例(div 元素)一起打印為 pdf 格式,但到目前為止都沒有成功。我得到了 jspf 庫和 html2canvas,但沒有任何效果。這是我嘗試過的代碼片段:$('#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 + "\"");});使用此代碼,它會生成僅包含原始畫布元素(在本例中為 canvas_img)的 pdf。有誰知道一個好的解決方案?
查看完整描述

1 回答

?
胡說叔叔

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

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


您應(yīng)該將最后 3 行移到最后一個嵌套o(hù)nrendered回調(diào)中。通過此更改,將在 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);

});


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

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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