如何通过更改页面方向从 JavaScript 生成 Word 文档？ （纵向到横向）
Posted
技术标签:
【中文标题】如何通过更改页面方向从 JavaScript 生成 Word 文档？ （纵向到横向）【英文标题】：How do i generate a Word Document from JavaScript with changing page orientations? (portrait to landscape) 【发布时间】：2018-09-21 04:22:53 【问题描述】：是否可以从 javascript 创建包含 2 个不同方向的页面（在同一个文档中）的 Word 文档？ IE。第 1 页 = 纵向，第 2 页 = 横向？这几乎正是我所追求的。我已经尝试了很多东西.. 比如 mso-break-type:section-break; mso 特殊字符：换行符；分页前：总是；等等，但没有运气。先感谢您！这是我目前所拥有的：
<script>
function export_to_word()
var link, blob, url;
blob = new Blob(['\ufeff', document.getElementById("docx").innerhtml],
type: 'application/msword'
);
url = URL.createObjectURL(blob);
link = document.createElement('A');
link.href = url;
link.download = 'Document'; // default name without extension
document.body.appendChild(link);
if (navigator.msSaveOrOpenBlob )
navigator.msSaveOrOpenBlob( blob, 'Document.doc'); // IE10-11
else link.click(); // other browsers
document.body.removeChild(link);
;
</script>
<html xmlns:office="urn:schemas-microsoft-com:office:office"
xmlns:word="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
<br>
<button onclick="export_to_word()">Export</button>
<div id="docx">
<style>
@page portrait_A4_page
size:595.45pt 841.7pt;
margin:1.0in 1.25in 1.0in 1.25in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:0;
div.portrait_A4_page page:portrait_A4_page;
@page landscape_A4_page
size:841.7pt 595.45pt;
mso-page-orientation: landscape;
margin:1.25in 1.0in 1.25in 1.0in;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:0;
div.landscape_A4_page page:landscape_A4_page;
</style>
<div class=portrait_A4_page>
<p>standard A4 portrait page information</p>
</div>
<div class=landscape_A4_page>
<table border=1>
<tr>
<td>a table that goes really wide</td>
</tr>
</table>
</div>
</div>
【问题讨论】：
有可能，但我不确定使用您展示的方法...这似乎是 Word 的往返 HTML 文件格式？这是未记录的，因此您最好的选择是在 Word 中创建一个具有所需功能的简单文档，将其保存为完整的 HTML 格式，然后查看 HTML 以了解它如何处理 更改页面方向所需的分节符。 谢谢您-您的解决方案有效！ :) 您应该回滚对问题的编辑并将信息作为答案发布。 Stack Overflow 是一个问答网站，而不是论坛。问题应包含问题，并且答案应放在答案中 - 您可以回答自己的问题并将其标记为此类（单击答案左侧的复选标记）。就目前而言，经过一定时间后，问题将从网站上消失。如果有答案，它将保留给可能搜索相同信息的其他人。 【参考方案1】：找到解决方案！下面的代码在同一个 JavaScript 生成的 Word 文档中从纵向（第 1 页）变为横向（第 2 页）。它可能可以进一步简化，但这有效：
<script>
function export_to_word()
var link, blob, url;
blob = new Blob(['\ufeff', document.getElementById("docx").innerHTML],
type: 'application/msword'
);
url = URL.createObjectURL(blob);
link = document.createElement('A');
link.href = url;
link.download = 'Document'; // default name without extension
document.body.appendChild(link);
if (navigator.msSaveOrOpenBlob )
navigator.msSaveOrOpenBlob( blob, 'Document.doc'); // IE10-11
else link.click(); // other browsers
document.body.removeChild(link);
;
</script>
<html xmlns:office="urn:schemas-microsoft-com:office:office"
xmlns:word="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
<br>
<button onclick="export_to_word()">Export</button>
<div id="docx">
<style>
table, tr, td, th
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
text-align: left;
.normal
font-family:"Calibri",sans-serif;
line-height:107%;
font-size:11.0pt;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
@page portrait_A4_page
size:595.3pt 841.9pt;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;
div.portrait_A4_page page:portrait_A4_page;
@page landscape_A4_page
size:841.9pt 595.3pt;
mso-page-orientation:landscape;
margin:72.0pt 72.0pt 72.0pt 72.0pt;
mso-header-margin:35.45pt;
mso-footer-margin:35.45pt;
mso-paper-source:0;
div.landscape_A4_page page:landscape_A4_page;
</style>
<div class=portrait_A4_page>
<span class=normal>
<p>standard A4 portrait page information</p>
</span>
<br clear=all style='mso-special-character:line-break; page-break-before:always'>
</div>
<br clear=all style='page-break-before:always; mso-break-type:section-break'>
<div class=landscape_A4_page>
<table class=normal>
<tr>
<td>a table that goes really wide</td>
</tr>
</table>
</div>
</div>
【讨论】：
以上是关于如何通过更改页面方向从 JavaScript 生成 Word 文档？ （纵向到横向）的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 JavaScript 函数更改 CSS 值（颜色标签）？ [复制]
如何在没有 CSS 且仅使用 JavaScript 或 jQuery/jQueryMobile 的情况下更改设备方向？