JS：将 html 导出为 word答案

【问题标题】：JS: Export html to wordJS：将 html 导出为 word
【发布时间】：2022-11-14 19:25:49
【问题描述】：

我正在尝试将我的 html 导出为 word。我的 HTML 页面有一个表格，当我将其导出为 word 时，它可以工作，但我的表格不再有边框。或者如何使用 js 将特定样式添加到我的表格中？

这是我的代码：

        <div align="right">
          <a class="btn" onclick="exportfile('exportContent', 'test');">save</a>
          <a class="btn" href="/lab_device/add/">add</a>
        </div>
      </div>
      <div class="card-body" id="exportContent">
         <div class="table-responsive">
           <table class="" width="100%" cellspacing="0">
              <thead>
                <tr style ="align-items: left;">
                  <th>1</th>
                  <th>2</th>
                  <th>3</th>
                  <th>op</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>{{ a }}</td>
                  <td>{{ a }}</td>
                  <td>{{ a }}</td>
                  <td>
                     <a class="btn" href="/lab_device//edit/">edit</a>
                     <a class="btn" href="/lab_device/delete/">delete</a>
                   </td>
                </tr>
              </tbody>
           </table>
         </div>
       </div>
    <script>
      function exportfile(element, filename=''){
      var prehtml ="<html xmins:0='urn:schemas-microsoft-com:office:office' xmins:w='urn:schemas-microsoft-com:office:office'>";
      var posthtml = "</body></table></html>";
      var html = prehtml+document.getElementById(element).innerHTML+posthtml;

      var blob = new Blob(['\ufeff', html],{
        type: 'application/msword'
       });

      var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html)

      filename = filename?filename+'.doc': 'document.doc';

      var downloadLink = document.createElement("a");

      document.body.appendChild(downloadLink);

      if(navigator.msSaveOrOpenBlob){
         navigator.msSaveOrOpenBlob(blob, filename);
       }else{
         downloadLink.href = url;
         downloadLink.download = filename;
         downloadLink.click();
       }
      }
    </script>

先感谢您！

【问题讨论】：

您没有导出到 Word。您正在导出 HTML，声称 HTML 是 Word，并希望用户拥有的用于阅读 Word 文档的任何软件都能够加载错误标记的 HTML 文档。

标签： javascript html

【解决方案1】：

**HTML**:

<h2>Demo</h2>
<button id="export">Export</button> Click to open table in Microsoft Word
    <div id="docx">
      <div class="WordSection1">
        <table>
          <tr>
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
            <td>E1</td>
          </tr>
          <tr>
            <td>A2</td>
            <td>B2</td>
            <td>C2</td>
            <td>E2</td>
          </tr>
          <tr>
            <td>A3</td>
            <td>B3</td>
            <td>C3</td>
            <td>E3</td>
          </tr>
          <tr>
            <td>A4</td>
            <td>B4</td>
            <td>C4</td>
            <td>E4</td>
          </tr>
        </table>
      </div>
    </div>

**CSS:**
    table {
      border-collapse: collapse;
    }
    td {
      border: 1px gray solid;
      padding: 4px;
      width: 5em;
    }

**JS:**
 window.export.onclick = function() {
 
   if (!window.Blob) {
      alert('Your legacy browser does not support this action.');
      return;
   }

   var html, link, blob, url, css;
   
   // EU A4 use: size: 841.95pt 595.35pt;
   // US Letter use: size:11.0in 8.5in;
   
   css = (
     '<style>' +
     '@page WordSection1{size: 841.95pt 595.35pt;mso-page-orientation: landscape;}' +
     'div.WordSection1 {page: WordSection1;}' +
     'table{border-collapse:collapse;}td{border:1px gray solid;width:5em;padding:2px;}'+
     '</style>'
   );
   
   html = window.docx.innerHTML;
   blob = new Blob(['ufeff', css + html], {
     type: 'application/msword'
   });
   url = URL.createObjectURL(blob);
   link = document.createElement('A');
   link.href = url;
   // Set default file name. 
   // Word will append file extension - do not add an extension here.
   link.download = 'Document';   
   document.body.appendChild(link);
   if (navigator.msSaveOrOpenBlob ) navigator.msSaveOrOpenBlob( blob, 'Document.doc'); // IE10-11
        else link.click();  // other browsers
   document.body.removeChild(link);
 };

【讨论】：

请avoid link only answers。答案“仅是指向外部站点的链接”may be deleted。
好的，我将在这里更新代码@Quentin