将html表导出为文件文件并更改文件方向 [英] export html table as word file and change file orientation

问题描述

我有jquery函数将html表导出到word文件。功能很好，但是我需要旋转一个单词文件到landacpe方向。有人可以帮助我吗？

这里是js函数：

  ; SCRIPT type =text / javascript> 
 $（document）.ready（function（）{
 $（＃btnExport）。click（function（）{
 var htmltable = document.getElementById（'tblExport'）; 
 var html = htmltable.outerHTML; 
 window.open（'data：application / msword，'+'\FEFF'+ encodeURIComponent（html））; 
}）; 
 }）; 
 Response.AddHeader（Content-Disposition，attachment; filename = myfilename.docx）; 
  

解决方案

将HTML导出到Microsoft Word

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

已更新：

在FireFox，Chrome，Opera，IE10-11中用Word 2010-2013测试。使用Chrome和IE10进行小代码更改。不能使用缺少window.Blob对象的旧版浏览器（IE< 10）。

  @page WordSection1 {
 mso-page-oriented：landscape; 
 size：841.95pt 595.35pt; / * EU A4 * / 
 / * size：11.0in 8.5in; * / / *美国信* / 
} 
 div.WordSection1 {
页面：WordSection1; 
} 
  

要查看完整的工作演示，请参阅： https://jsfiddle.net/78xa14vz/3/

使用Javascript导出到Word：

  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（['\\\'，css + html]，{
 type：'application / msword'
}）; 
 url = URL.createObjectURL（blob）; 
 link = document.createElement（'A'）; 
 link.href = url; 
 link.download ='文件'; //默认名称不带扩展名
 document.body.appendChild（link）; 
 if（navigator.msSaveOrOpenBlob）navigator.msSaveOrOpenBlob（blob，'Document.doc'）; // IE10-11 
 else link.click（）; //其他浏览器
 document.body.removeChild（link）; 
}; 
  

而HTML：

 < button onclick =export2Word（window.docx）>导出< / button> 
< div id =docx> 
< div class =WordSection1> 
 
<！ - 您要导出的html在这里 - > 
 
< / div> 
< / div> 
  

I have jquery function which exporting html table to word file. Function works great, but I need to rotate a word file to landsacpe orientation. Can somebody help me?

Here is js function:

    <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");

解决方案

Export HTML to Microsoft Word

You may set page orientation, paper size, and many other properties by including the CSS in the exported HTML. For a list of available styles see MS Office prefixed style properties Some styles have dependencies. For example, to set mso-page-orientation you must also set the size of the page as shown in the code below.

Updated:
Tested with Word 2010-2013 in FireFox, Chrome, Opera, IE10-11. Minor code changes to make work with Chrome and IE10. Will not work with legacy browsers (IE<10) that lack window.Blob object.

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

To view a complete working demo see: https://jsfiddle.net/78xa14vz/3/

The Javascript used to export to Word:

 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);
 };

And the HTML:

<button onclick="export2Word(window.docx)">Export</button>
<div id="docx">
  <div class="WordSection1">

     <!-- The html you want to export goes here -->

  </div>
</div>

这篇关于将html表导出为文件文件并更改文件方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！