これらの素晴らしいstackoverflowリソースに従って、いくつかのHTMLからWord文書を作成しています。
- Office HTML Word ヘッダー
- ドキュメントのすべての印刷ページに HTML を使用してヘッダーとフッターを印刷する方法は?
- ヘッダー、フッター、透かしを含む HTML 生成の Microsoft Word 文書
試してみようとしている人は、Word が動作する CSS に関しては控えめに言っても不完全であるため、多少の苦痛を覚悟してください。列が必要な場合は、テーブルを使用してレイアウトする方法に戻る必要があります。
画像のサイズを適切に調整するのに問題があります - ユーザーがアップロードした画像があり、この Word 文書で使用されます。「高さ」プロパティに基づいてサイズを変更したいと思います- 高さ 50px にします。それに応じて幅を調整します。
これを行う方法に関するドキュメントは、Web 上のどこにもないようです。
また、いくつかの html2canvas コードを使用して、見栄えの良い (CSS ベースの) 棒グラフを画像に変換しました。これは、優れたhttp://www.kubilayerdogan.net/?pに従って Word ドキュメントで直接使用できます。 =304 .
この画像はうまく印刷されないので、html2canvas コードを実行する前に、(jQuery を使用して) ソース HTML を画面上で (メモリに隠して) 大きくすることを計画しています。次に、サイズを小さくして、より高い DPI 値を取得します。
まず、CSS の幅と高さが Word の画像に影響を与えないことを知りました。同様に、以下は機能しません。
<img class="cobrandedlogo" src="' . $logourl . '" height="50px" />';
しかし、「ポイント」を使用すると次のように機能することがわかりました。
<img class="cobrandedlogo" src="' . $logourl . '" height="50" />';
しかし、これは非常に引き伸ばされた画像を生成します (もちろん、ソース マテリアルによって異なります)。元の画像に合わせて拡大縮小したい。
私はPHPを使用しています。
私はこのSOの記事を発見しました。
これが私が使ってきたいくつかのコードです：
div の画像を生成し、表示された HTML を少し変更して PHP ファイルに送信する jQuery コード:
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();
}
});
また、単語 doc を生成するためのボタンの HTML:
<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>
最後に、使用した PHP ファイルは次のとおりです。
<?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>";
?>
Word が縦横比を保持するように、高さまたは幅だけを使用して (HTML を使用して) Word に挿入する画像のサイズを変更するにはどうすればよいですか?