如何使用 HTML 代码生成 docx 文件，并在样式标签中嵌入 CSS 代码？答案

【问题标题】：How to generate docx file using HTML code, embedded with CSS code inside style tags?如何使用 HTML 代码生成 docx 文件，并在样式标签中嵌入 CSS 代码？
【发布时间】：2019-05-04 06:18:45
【问题描述】：

我正在尝试使用包含内部css 样式和HTML 标记属性的HTML 代码生成一个docx 文件并为用户下载它。此 HTML 代码是使用 docx2html 包生成的，它允许（听起来）我们将上传的 docx 文件转换为 HTML，所以我想做相反的过程：

<p><meta charset=utf-8><meta key="generator" value="docx2html">docx  file titel 
<style type="text/css">#A * { margin: 0px; border: 0px; padding: 0px; box-sizing: border-box; }
#A table { width: 100%; border-collapse: collapse; word-break: break-word; }
#A section { margin: auto; background-color: white; color: black; position: relative; z-index: 0; }
#A p:empty::before { content: ""; display: inline-block; }
#A ul { list-style: none; }
#A ul > li > p { position: relative; }
#A ul .marker { position: absolute; }
#A a { text-decoration: none; }
#A .unsupported { outline: red solid 2px; }
#A .warning { outline: yellow solid 1px; }
#A p, #A h1, #A h2, #A h3, #A h4, #A h5, #A h6 { margin-bottom: 10px; line-height: 107.917%; }
#A span, #A a { font-family: Calibri; font-size: 11px; }
#A .Normal { margin-bottom: 13px; line-height: 115%; }
#A .Normal span { }
#A .Policepardfaut { }
#A .TableauNormal { }
#A .TableauNormal > tbody > tr > td { padding: 0px 7px; }
#A .Default { line-height: 100%; }
#A .Default span { font-family: Calibri; color: rgb(0, 0, 0); font-size: 12px; }
</style>
</p>

<div id="A" style="background-color: transparent; min-height: 1000px; width: 100%; padding-top: 20px; overflow: auto;">
<style type="text/css">
</style>
<section style="width: 793px; min-height: 1122px; padding: 94px; column-gap: 47px;">
<p class="Normal" style="line-height: 100%; text-align: right;"><span class="Policepardfaut" style="font-family: Calibri; font-weight: 700; color: rgb(0, 0, 0); font-size: 14px;">Alger, </span><span class="Policepardfaut" style="font-family: Calibri; font-weight: 700; color: rgb(0, 0, 0); font-size: 14px;">Le </span><span class="Policepardfaut" style="font-family: Calibri; color: rgb(0, 0, 0); font-size: 14px;">25</span><span class="Policepardfaut" style="font-family: Calibri; color: rgb(0, 0, 0); font-size: 14px;">/07/2018</span></p>
</section>
</div>

【问题讨论】：

标签： php html laravel generator docx

【解决方案1】：

PHPWord

PHPWord 是一个不错的库，您可以使用它来读取和写入不同的格式。它还支持读取 html 和写入 docx。也可以使用 HTML 样式。

https://github.com/PHPOffice/PHPWord

// Creating the new document...
$phpWord = new \PhpOffice\PhpWord\PhpWord();

$section = $phpWord->addSection();
$html = '<h1>Adding element via HTML</h1>';
$html .= '<p>Some well-formed HTML snippet needs to be used</p>';
$html .= '<h2 style="align: center">centered title</h2>';

\PhpOffice\PhpWord\Shared\Html::addHtml($section, $html, false, false);

// Saving the document as OOXML file...
$objWriter = \PhpOffice\PhpWord\IOFactory::createWriter($phpWord, 'Word2007');
$objWriter->save('example.docx');

php 替代。

你也可以试试这里的建议——这种方法不需要任何库——>

https://stackoverflow.com/a/43380995/5687225

javascript 替代方案。

如果你想通过 javascript 来实现，你可以使用下面的包 pt-html-docx-js。

https://www.npmjs.com/package/pt-html-docx-js

你会这样使用它

var converted = htmlDocx.asBlob(content, {orientation: 'landscape', margins: {top: 720}});
saveAs(converted, 'test.docx');

【讨论】：