翻译Background
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 with blue logo
- pdf with pink logo
etc.
What I know how to do: 1. I know how to loop through the selected records in my table in jquery 2. 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.
Problem
It seems that unless the DIVs that will be included in the PDF are visible, html2canvas won't work.
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; }