Need some JS/jQuery help

[Demitry]

Hi,

I’m finishing up an update to a Multi-Vendor Shipping (MVS) addon feature, and have encountered a situation that I am having a difficult time resolving. The problem is with my JS/jQuery skills.

A while back, I made a Purchase Order feature that can be saved as a PDF file and sent to the vendor via email from the same page. While updating this page and its features, I came across an issue where the text that wraps inside of a textbox/textarea element, but does not wrap when rendered via a PDF file. I found a number of solutions to wrap this text for those fields in the PDF, but cannot seem to make any of these solutions work with my current jQuery code for generating the PDF file.

The screenshot image below shows how the admin Vendor Purchase Order page looks. Within this page, there are 4 fields that I need to allow for text wrapping. The product name (when it’s a long one), the Vendor Instructions (not visible when no instructions are listed via the vendor profile), the customer’s comments from the order (not visible if no comments are made at the time of purchase), and the additional order comments (last-minute store-owner comments added before generating the PDF – these are not saved anywhere in osC, only to the generated PDF file).

I could probably use the wordwrap() function via PHP for the first three fields (because the data for these are extracted from the database), but not for the last one. That additional order comments textarea should be jQuery. Here is the code I have to generate the PDF:

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.min.js"></script>

and in the body:

<script>
$(document).ready(function() {
  $(".btn_genPDF").click(function() {
	var element = document.getElementById("pdf-Content");
	html2pdf(element, {
        margin:      <?php echo $js_margin; ?>, // margin in pixels when jsPDF units set to 'pt' = best page-centering
        filename:    '<?php echo $filename; ?>',
        image:       { type:'jpeg', quality:0.98 }, // default quality setting is 0.95
        html2canvas: { scale:3, dpi:192, logging:true, letterRendering:true, position:0 }, // scale: 1 to 5, where 1 is default and lowest quality setting
        pagebreak:   { mode:'avoid-all', before:'#po_page_break' },
        jsPDF:       { unit:'pt', format:'letter', orientation:'<?php echo $js_orientation; ?>' }
    })
  });
});
</script>

It seems that using the jQuery splitTextToSize() function is the valid way to wrap text inside an element, but I could really use some help with how to integrate that function with the current code that generates the PDF file. Any help would be greatly appreciated.