Ho costruito un documento Word da qualche HTML come da queste risorse StackOverflow fantastici:Come posso ridimensionare un'immagine in un documento word generato da HTML mantenendo le proporzioni?
- Office HTML Word header
- How to use HTML to print header and footer on every printed page of a document?
- HTML generated Microsoft Word document with header, footer and watermark
Per coloro che sono in procinto di provare, preparatevi per un po 'di dolore in quanto Word è frammentaria per non dire altro quando si tratta di quale CSS funziona. Se vuoi le colonne, devi davvero tornare a usare i tavoli per sistemare le cose.
Ho riscontrato problemi con il corretto dimensionamento dell'immagine - Ci sono immagini caricate dall'utente che verranno utilizzate in questo documento di Word e vorrei ridimensionarle in base alla proprietà "height" - a un'altezza di 50 px e quindi ridimensionare la larghezza di conseguenza.
Sembra che non ci sia documentazione su come farlo ovunque sul web.
Ho anche utilizzato del codice html2canvas per trasformare un grafico a barre dall'aspetto gradevole (basato su CSS) in un'immagine, che è quindi utilizzabile direttamente nella parola documento come da eccellente http://www.kubilayerdogan.net/?p=304.
Questa immagine non sta stampando bene, quindi ho intenzione di rendere l'HTML sorgente più grande sullo schermo (nascosto nella memoria) (usando jQuery) prima di eseguire il codice html2canvas su di esso - in questo modo avrò un più grande immagine che posso quindi ridurre di dimensioni e ottenere un numero DPI più alto.
In primo luogo, ho imparato che la larghezza e l'altezza dei CSS non hanno alcun impatto sulle immagini in Word. Allo stesso modo, il seguente non funziona.
<img class="cobrandedlogo" src="' . $logourl . '" height="50px" />';
Ma io ho trovato che l'uso di opere 'punti' in questo modo:
<img class="cobrandedlogo" src="' . $logourl . '" height="50" />';
Ma questo produce un'immagine molto allungata (a seconda del materiale di partenza, naturalmente). Voglio che sia ridimensionato in base all'immagine originale.
Sto usando PHP.
ho scoperto questo SO articolo che sembra vi aiuterà: Calculating image size ratio for resizing
Ecco po 'di codice che ho usato:
codicejQuery per generare l'immagine di un div, modificare la visualizzazione di un codice HTML bit e lo sottopone a un file PHP:
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's value to image data (base-64 string)
jQuery('#img_val').val(canvas.toDataURL("image/png"));
//Submit the form manually
document.getElementById("getword").submit();
}
});
anche questo codice HTML per il pulsante per generare il documento di parola:
<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>
Infine - ecco il file PHP che ho usato:
<?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>";
?>
Come faccio a ridimensionare le immagini che sto inserendo in parola (utilizzando HTML) utilizzando solo l'altezza o larghezza, in modo che Word mantiene il rapporto di aspetto?
Se si utilizza PHP non è possibile utilizzare jQuery. Inoltre, ridimensionare un'immagine, ridimensionarla di nuovo non migliorerà le cose. Tutta questa domanda è confusa. Si prega di riformulare e includere alcuni esempi di codice in modo che possiamo vedere cosa stai facendo. –
Sto utilizzando jQuery nella pagina in cui il report viene presentato all'utente: è disponibile anche una versione online del report. –
Uso il metodo .clone() per clonare il div in questione che contiene il report e quindi aggiungere e rimuovere elementi come richiesto prima di pubblicarli nel file PHP. Questo è anche il modo in cui postare l'immagine binaria nel file PHP in modo che l'immagine possa essere salvata sul lato server, quindi utilizzata nella parola doc. Capiresti se avessi provato a usare Word HTML! –