vue项目里使用纯js实现将页面导出为word

最新推荐文章于 2025-05-30 10:55:01 发布

原创最新推荐文章于 2025-05-30 10:55:01 发布 · 579 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

js常用功能专栏收录该内容

2 篇文章

订阅专栏

博客主要围绕DOM部分展开，提到样式可通过字符串拼接方式处理，还展示了页面效果以及导出的Word效果，涉及JavaScript和Vue.js相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dom部分

<template>
  <div>
    <button @click="wordExport">点击导出为word</button>
    <div id="wordTest">
      <p>这是一个word</p>
      <table style="border:1px solid">
        <thead>
          <th>文本1</th>
          <th>文本2</th>
          <th>文本3</th>
          <th>文本4</th>
        </thead>
        <tbody>
          <tr>
            <td>NO.1</td>
            <td>NO.2</td>
            <td>NO.3</td>
            <td>NO.4</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

样式可以通过字符串拼接的方式将

wordExport() {
      let header =
        "<html xmlns:o='urn:schemas-microsoft-com:office:office' " +
        "xmlns:w='urn:schemas-microsoft-com:office:word' " +
        "xmlns='http://www.w3.org/TR/REC-html40'>" +
        "<head><meta charset='utf-8'><title>Export HTML to Word Document with JavaScript</title></head><body>" +
        "<style type='text/css'>p{text-align: center;};table{width:100%};th {background: red;color: blue;} th,tr,td{border:1px solid;text-align: center;};</style>";
      let footer = "</body></html>";
      let sourceHTML =
        header + document.getElementById("wordTest").innerHTML + footer;
      let source =
        "data:application/vnd.ms-word;charset=utf-8," +
        encodeURIComponent(sourceHTML);
      let fileDownload = document.createElement("a");
      document.body.appendChild(fileDownload);
      fileDownload.href = source;
      fileDownload.download = "document.doc";
      fileDownload.click();
      document.body.removeChild(fileDownload);
    }
  }