将HTML表格导出为Word文件并更改文件方向。

9
我有一个 jQuery 函数,可以将 HTML 表格导出到 Word 文件。这个函数很好用,但我需要将 Word 文件旋转为横向方向。有人能帮帮我吗?
以下是 JavaScript 函数:
    <SCRIPT type="text/javascript">
$(document).ready(function () {
    $("#btnExport").click(function () {
        var htmltable= document.getElementById('tblExport');
        var html = htmltable.outerHTML;
        window.open('data:application/msword,' + '\uFEFF' + encodeURIComponent(html));
    });
});
  Response.AddHeader("Content-Disposition", "attachment;filename=myfilename.docx");


不要认为这是不可能的,因为你并不是从头开始创建一个Word文档,而只是将HTML内容作为Word文档发送到响应中。 - Techie
1
@Nimesh - 如果您创建与Word兼容的HTML并使用MS Office CSS样式,则可以实现。 - Yogi
@Martynas先生,您是否找到了将.doc文件导出为纵向横向A4的最终解决方案?因为对于下面的答案,当我打开文件时,它是以网页布局的形式呈现的,那么我该如何解决这个问题? - ZACK_G
1个回答

22

将HTML导出为Microsoft Word

通过在导出的HTML中包含CSS,您可以设置页面方向、纸张大小和许多其他属性。有关可用样式的列表,请参见MS Office前缀样式属性。某些样式具有依赖关系。例如,要设置mso-page-orientation,您还必须像下面代码中所示设置页面的大小。

更新:
在Firefox、Chrome、Opera和IE10-11中使用Word 2010-2013进行了测试。对代码进行了轻微更改,以使其与Chrome和IE10兼容。将无法在缺乏window.Blob对象的旧版浏览器(IE<10)中使用。如果收到“createObjectURL不是函数”错误消息,请参见此SO帖子:https://dev59.com/omkw5IYBdhLWcg3wBl-A#10195751

2022年更新:
修复了破损的GitHub链接。

     @page WordSection1{
         mso-page-orientation: landscape;
         size: 841.95pt 595.35pt; /* EU A4 */
         /* size:11.0in 8.5in; */ /* US Letter */
     }
     div.WordSection1 {
         page: WordSection1;
     }

查看完整的演示,请访问:https://jsfiddle.net/78xa14vz/3/

用于导出到Word的JavaScript代码:

 function export2Word( element ) {

   var html, link, blob, url, css;
   
   css = (
     '<style>' +
     '@page WordSection1{size: 841.95pt 595.35pt;mso-page-orientation: landscape;}' +
     'div.WordSection1 {page: WordSection1;}' +
     '</style>'
   );
   
   html = element.innerHTML;
   blob = new Blob(['\ufeff', css + html], {
     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);
 };

而 HTML 代码为:

<button onclick="export2Word(window.docx)">Export</button>
<div id="docx">
  <div class="WordSection1">
    
     <!-- The html you want to export goes here -->

  </div>
</div>

它的工作效果很好,但即使我将Blob转换为Base64(我需要Base64而不是即时下载),我仍然没有文件扩展名。你能帮我解决这个问题吗? - chourn solidet
@Roberto,对于图像它不起作用...请看一下这个jsfiddle https://jsfiddle.net/shamoh19/9zhgnyek/ - ShaMoh
@Roberto,我也已经实现了这种方式,但是如果我需要一个表格数组呢?这意味着一个表格提供一个base64数据。那么,当我们有多个blob的onloadend时,是否会出现问题????这是我的担忧,因为我有通过canvas加载多个图像的经验(第一张图像正在加载,然后第二张图像出现并替换)。这会产生意外的结果。 - chourn solidet
@ShaMoh - 抱歉,我没有看到任何变化。也许这个链接可以帮助你:jsfiddle - Yogi
1
Roberto,你真是太棒了。谢谢你。非常高兴你提供了一个非jQuery的解决方案。对于任何使用此代码的人来说,有一个提示- 将文件名命名为有用的名称会很有帮助。link.download = 'QuizResults<?php echo $quizid;?>'; 并且 if (navigator.msSaveOrOpenBlob ) navigator.msSaveOrOpenBlob( blob, 'QuizResults<?php echo $quizid;?>.doc'); // IE10-11 - Xaraxia
显示剩余6条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接