html2canvas-是否可以将隐藏的DIV打印到pdf?

本文介绍了html2canvas-是否可以将隐藏的DIV打印到pdf?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

背景

我有一个记录表，该记录表使用制表符"控件来允许用户进行排序，过滤等.一旦他们在表中获得了想要的结果，我就需要提供一种方法，使用户可以使用PDF模板触发每行PDF的创建.在页面顶部，我有一个下拉菜单，他们可以在其中选择模板.例如，它将具有以下选项:

I have a table of records that uses the "tabulator" control to allow users to sort, filter etc.once they have the results they want in the table, I need to provide a way for users trigger the creation of a PDF per row, using a PDF template.At the top of the page, I have a drop down menu where they can select a template. For example, it will have options like this:

带有蓝色徽标的pdf
带有粉红色徽标的pdf

等

我知道该怎么做1.我知道如何遍历jQuery中表中的选定记录2.我知道如何创建基本的jsPDF文档.3.模板"机制将只是网页中预定义的2种不同.根据他们在下拉菜单中选择的选项，我可以确定要包括的徽标.

What I know how to do:1. I know how to loop through the selected records in my table in jquery2. I know how to create a basic jsPDF document.3. The "template" mechanism will simply be 2 different that are predefined in the webpage. Depending on which option they select in the dropdown, I can determine which logo to include.

问题

似乎，除非将包含在PDF中的DIV可见，否则html2canvas将无法工作.

It seems that unless the DIVs that will be included in the PDF are visible, html2canvas won't work.

到目前为止，这是我一直在使用的原型代码:(除了我尝试以PDF格式显示的DIV在屏幕上显示的事实之外，其他所有方法都起作用.)

So far, this is the prototype code I've been playing with:(other than the fact that the DIV i'm trying to PDF shows on the screen, everything else works.)

<div id="bluetemplate" class="ug_logo_style" style="display: none">
    <img class="bluelogo"></img>
</div>
<div id="pinktemplate" class="ug_logo_style" style="display: none">
    <img class="pinklogo"></img>
</div>

$("#templatedropdown").change(function(){
   var selectedtemplate = this.value;
   switch (selectedtemplate){
        case 'blue':
            $("div#bluetemplate").show();
            $("div#pinktemplate").hide();
            break;
        case 'pink':
            $("div#pinktemplate").show();
            $("div#bluetemplate").hide();
            break;
   }
});

$("#btntemplate").click(function(){
    switch($('#template option:selected').val()){
        case 'blue':
            var imgData;
            html2canvas($("#bluetemplate"), {
                useCORS: true,
                onrendered: function (canvas) {
                    imgData = canvas.toDataURL(
                       'image/png');
                    var doc = new jsPDF({
                        orientation: 'landscape',
                        unit:'pt',
                        format:[400,200]});
                    doc.addImage(imgData, 'PNG', 10, 10);

                    doc.text(registrant.first_name + " " + registrant.last_name, 10, 100);
                    doc.text(registrant.email, 10, 120);
                    doc.save(registrant.event_id + '_' + registrant.id + '.pdf');
                    window.open(imgData);
                }
            });

            break;
        case 'pink':
            var imgData;
            html2canvas($("#pinktemplate"), {
                useCORS: true,
                onrendered: function (canvas) {
                    imgData = canvas.toDataURL(
                       'image/png');
                    var doc = new jsPDF({
                        orientation: 'landscape',
                        unit:'pt',
                        format:[400,200]});
                    doc.addImage(imgData, 'PNG', 10, 10);

                    doc.text(registrant.first_name + " " + registrant.last_name, 10, 100);
                    doc.text(registrant.email, 10, 120);
                    doc.save(registrant.event_id + '_' + registrant.id + '.pdf');
                    window.open(imgData);
                }
            });

            break;
    }

it

html2canvas-是否可以将隐藏的DIV打印到pdf?

问题描述

推荐答案