I was creating a document document from some HTML according to these fantastic stackoverflow resources:
For those who are going to try this, get ready for some pain, because Word is patchy when it comes to the CSS it works with. If you need columns, you really need to revert to using tables to lay out the material.
I'm having trouble adjusting the image correctly - There are images that the user uploads will be used in this Word document, and I would like to resize them based on the height property - to a height of 50 pixels, and then the corresponding width.
There seems to be no documentation on how to do this anywhere on the Internet.
I also used some html2canvas code to turn a beautiful (CSS-based) diagram into an image, which can then be used directly in the word document according to the excellent http://www.kubilayerdogan.net/?p=304 .
This image does not print well, so I plan to make the original HTML bigger on the screen (hidden in memory) (using jQuery) before running the html2canvas code on it - this way I will have an enlarged image which I can then reduce in size and get more high DPI number.
First, I found out that CSS width and height do not affect images in Word. Similarly, the following does not work.
<img class="cobrandedlogo" src="' . $logourl . '" height="50px" />';
But I found that using “dots” works like this:
<img class="cobrandedlogo" src="' . $logourl . '" height="50" />';
But this creates a very stretched image (depending on the source material, of course). I want it to scale according to the original image.
I am using PHP.
I found this SO article, which seems to help: Calculating image aspect ratio for resizing
Here is the code I used:
JQuery code to create a div image, modify the displayed HTML a bit and send it to a PHP file:
var wordreport = jQuery('#container').clone(); jQuery(wordreport).find('#stats').html('<img src="http://improvedemployees.com/assets/teamstats/' + jQuery('#imgname').val() + '" />'); jQuery(wordreport).find('.columncontainer').each(function() { jQuery(this).children().wrapAll('<table><tr>'); }); // these were 3 columns on the screen - converted to a table and tds for Word jQuery(wordreport).find('.memberstrengths').wrap('<td valign=top>'); jQuery(wordreport).find('.membercommunication').wrap('<td valign=top>'); jQuery(wordreport).find('.memberimproving').wrap('<td valign=top>'); jQuery(wordreport).find('#generateword').remove(); jQuery(wordreport).find('script').remove(); var htmlpluscss = jQuery(wordreport).html(); htmlpluscss = '<style>.reportsection {border:1px solid #fff!important; padding:0px; margin-bottom:0px;}</style>' + htmlpluscss; jQuery('#dochtml').val(htmlpluscss); jQuery('#rawhtml').val(htmlpluscss); jQuery('#stats').html2canvas({ onrendered: function (canvas) { //Set hidden field value to image data (base-64 string) jQuery('#img_val').val(canvas.toDataURL("image/png")); //Submit the form manually document.getElementById("getword").submit(); } });
Also this HTML for the button to generate the word doc:
<div id="generateword"> <form method="post" action="/createword.php" target="_blank" id="getword"> <input type="hidden" name="docname" id="docname" /> <input type="hidden" name="dochtml" id="dochtml" /> <input type="hidden" name="orientation" id="orientation" value="landscape" /> <input type="hidden" name="logourl" value="<?php echo get_user_meta(get_current_user_id(), 'reportlogourl', true); ?>" /> <input type="hidden" name="img_val" id="img_val" value="" /> <input type="hidden" name="imgname" id="imgname" value="<?php echo $_GET['teamid']; ?>.png" /> <input type="button" value="View in Word" id="createword" /> </form> </div>
Finally, here is the PHP file I used:
<?php header("Content-type: application/vnd.ms-word"); header("Content-Disposition: attachment;Filename=" . $_POST['docname'] . ".doc"); $filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1); //Decode the string $unencodedData=base64_decode($filteredData); //Save the image $imgfile = $_POST['imgname']; //file_put_contents("/assets/teamstats/" . $imgfile, $unencodedData); file_put_contents("assets/teamstats/" . $imgfile, $unencodedData); $orientation = 'portrait'; if(isset($_POST['orientation'])) { $orientation = 'landscape'; } $logourl = ''; if(isset($_POST['logourl'])) { $logourl = $_POST['logourl']; } echo '<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"> <head><meta http-equiv=Content-Type content="text/html; charset=utf-8"><title></title> <style> v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} </style> <style> @page { '; if ($orientation == 'landscape') { echo 'mso-page-orientation: landscape; size:29.7cm 21cm; margin:1cm 1cm 1cm 1cm;'; } else { echo 'mso-page-orientation: portrait; size:21cm 29.7cm; margin:1cm 1cm 1cm 1cm;'; } echo ' } @page Section1 { mso-header-margin:.5in; mso-footer-margin:.5in; mso-header: h1; mso-footer: f1; } div.Section1 { page:Section1; font-family:Helvetica; '; if ($orientation == 'landscape') { echo 'font-size:12px; '; } else { echo 'font-size:14px; line-height:20px;'; } echo ' text-align:left;} table#hrdftrtbl { margin:0in 0in 0in 900in; width:1px; height:1px; overflow:hidden; } p.MsoHeader { '; if ($orientation == 'landscape') { echo ' tab-stops:right 29.0cm;'; } else { echo ' tab-stops:right 21.0cm;'; } echo ' } p.MsoFooter, li.MsoFooter, div.MsoFooter { margin:0in; margin-bottom:.0001pt; mso-pagination:widow-orphan; '; if ($orientation == 'landscape') { echo 'tab-stops:center 14.5cm right 29.0cm;'; } else { echo 'tab-stops:center 10.5cm right 21.0cm;'; } echo ' font-size:12px; } </style> <xml> <w:WordDocument> <w:View>Print</w:View> <w:Zoom>100</w:Zoom> <w:DoNotOptimizeForBrowser/> </w:WordDocument> </xml> </head>'; echo "<body>"; echo '<div class="Section1">'; echo $_POST['dochtml']; echo '<style>h3, table { margin-top:0px!important; } div.membername { margin-bottom:0px!important; margin-top:0px!important; height:39px!important; line-height:25px!important; } div.membername, span.membershape, span.membertraits { height:39px!important; line-height:25px!important; padding:0px!important; margin:0px!important; } h2.membername { margin-top:0px!important; margin-bottom:0px!important; padding-top:0px!important; padding-bottom:0px!important; line-height:25px; height:25px!important; font-size:24px!important; } table.tdmembername, table.tdmembername tr, table.tdmembername td, table.tdmembername span { background-color:black!important; } div.columncontainer { margin-top:0px!important; } img.cobrandedlogo { max-height:50px; height:50px; } </style> '; echo ' <br/> <table id="hrdftrtbl" border="0" cellspacing="0" cellpadding="0"> <tr><td> <div style="mso-element:header" id=h1 > <p class=MsoHeader ><img src="http://improvedemployees.com/img/logo-x50.png" style="height:50px" height="50px"/><span style=mso-tab-count:1"></span>'; if ($logourl != "") { $newheight = 50; list($originalwidth, $originalheight) = getimagesize($logourl); $ratio = $originalheight / $newheight; $newwidth = $originalwidth / $ratio; echo '<img class="cobrandedlogo" src="' . $logourl . '" height="50" width="' . $newwidth . '" />'; } echo '</p> </div> </td> <td> <div style="mso-element:footer" id=f1><span style="position:relative;z-index:-1"> <p class=MsoFooter> <span style=mso-tab-count:1"></span> www.improvedemployees.com <span style=mso-tab-count:1"></span> Page <span style="mso-field-code: PAGE "><span style="mso-no-proof:yes"></span> of <span style="mso-field-code: NUMPAGES "></span></span> </p> </div> <div style="mso-element:header" id=fh1> <p class=MsoHeader><span lang=EN-US style="mso-ansi-language:EN-US"> <o:p></o:p></span></p> </div> <div style="mso-element:footer" id=ff1> <p class=MsoFooter><span lang=EN-US style="mso-ansi-language:EN-US"> <o:p></o:p></span></p> </div> </td></tr> </table> </div>'; echo "</body>"; echo "</html>"; ?>
How do I resize images that I insert into a word (using HTML) using only height or width so that Word maintains aspect ratio?