Vue中实现将html导出为word文档

已于 2024-09-30 11:11:32 修改
阅读量42 收藏
点赞数
分类专栏： web前端 文章标签： vue.js html word
于 2023-10-11 10:47:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/icemwj/article/details/133708473
版权

需求：将页面整成理想样式，将想要的那一部分页面导出成word，不用写模板，按照当前页面样式导出即可。

方法1：使用插件 mhtml-to-word

插件地址：https://www.npmjs.com/package/mhtml-to-word

插件描述： mhtmlToWord.js 是将 html 模板字符串通过模板引擎转换并导出 word 文件的 js 库，它支持浏览器环境和 nodejs 支持环境如 react，vue 等。

（1）安装需要的依赖

npm install file-saver --save
npm install mhtml-to-word --save

（2）在需要的地方引入依赖

import { exportWord } from 'mhtml-to-word';

（3）导出 html 为 word

    // 导出html为word
    htmlExportWord() {
      console.log('html导出word');

      let html = `<div id="目录">
                    <h1 style="text-align: center;font-size: 35px">2023年1-4噪声功能区季度报告</h1>
                    <h3 style="text-align: center;font-size: 25px">目录</h3>
                  </div>`;

      let tableHtml = document.getElementById('eleTable').innerHTML;

      let htmlStr = `
                      <!DOCTYPE html>
                      <html lang="en">
                      <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Document</title>
                      </head>
                      <body>
                        ${html}
                        ${tableHtml}
                      </body>
                      </html>
                    `;
      console.log(htmlStr);

      exportWord({
        mhtml: htmlStr,
        data: { title: "exportword" },
        filename: "exportTest",
        style: ""
      })

    },

效果图：
在这里插入图片描述

方法2：直接使用插件 html-docx-js 或者使用插件 html-docx-js 和 file-saver

插件文档： http://docs.asprain.cn/html-docx/readme.html

（1）安装需要的依赖

npm install file-saver --save
npm install html-docx-js --save

（2）在需要的地方引入依赖

import { saveAs } from 'file-saver';
import htmlDocx from 'html-docx-js/dist/html-docx';

（3）导出 html 为 word

html:

    <div>
      <button @click="htmlExportWord">html导出word</button>
    </div>

    <div data-v-1a1eb75f style="margin-top: 60px; margin-bottom: 30px;" id="eleTable">
      <div data-v-1a1eb75f style="font-size: 16px; font-family: 仿宋; text-align: center;">表1 2022年第1-4季度各类功能区监测点位达标率一览表</div>
      <div
        data-v-1a1eb75f
        class="el-table el-table--fit el-table--striped el-table--border el-table--group el-table--enable-row-hover el-table--enable-row-transition el-table--medium"
        header-align="center"
        style="width: 100%;"
      >
        <div class="hidden-columns">
          <div data-v-1a1eb75f></div>
          <div data-v-1a1eb75f></div>
          <div data-v-1a1eb75f></div>
          <div data-v-1a1eb75f>
            <div data-v-1a1eb75f></div>
            <div data-v-1a1eb75f></div>
          </div>
          <div data-v-1a1eb75f>
            <div data-v-1a1eb75f></div>
            <div data-v-1a1eb75f></div>
          </div>
          <div data-v-1a1eb75f>
            <div data-v-1a1eb75f></div>
            <div data-v-1a1eb75f></div>
          </div>
          <div data-v-1a1eb75f>
            <div data-v-1a1eb75f></div>
            <div data-v-1a1eb75f></div>
          </div>
          <div data-v-1a1eb75f>
            <div data-v-1a1eb75f></div>
            <div data-v-1a1eb75f></div>
          </div>
          <div data-v-1a1eb75f>
            <div data-v-1a1eb75f></div>
            <div data-v-1a1eb75f></div>
          </div>
        </div>
        <div class="el-table__header-wrapper">
          <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 1247px;">
            <colgroup>
              <col name="el-table_17_column_229" width="100" />
              <col name="el-table_17_column_230" width="100" />
              <col name="el-table_17_column_231" width="87" />
              <col name="el-table_17_column_232_column_233" width="80" />
              <col name="el-table_17_column_232_column_234" width="80" />
              <col name="el-table_17_column_235_column_236" width="80" />
              <col name="el-table_17_column_235_column_237" width="80" />
              <col name="el-table_17_column_238_column_239" width="80" />
              <col name="el-table_17_column_238_column_240" width="80" />
              <col name="el-table_17_column_241_column_242" width="80" />
              <col name="el-table_17_column_241_column_243" width="80" />
              <col name="el-table_17_column_244_column_245" width="80" />
              <col name="el-table_17_column_244_column_246" width="80" />
              <col name="el-table_17_column_247_column_248" width="80" />
              <col name="el-table_17_column_247_column_249" width="80" />
              <col name="gutter" width="0" />
            </colgroup>
            <thead class="is-group has-gutter">
              <tr class>
                <th
                  colspan="1"
                  rowspan="2"
                  class="el-table_17_column_229 is-center is-leaf el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">年份</div>
                </th>
                <th
                  colspan="1"
                  rowspan="2"
                  class="el-table_17_column_230 is-center is-leaf el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">城市</div>
                </th>
                <th
                  colspan="1"
                  rowspan="2"
                  class="el-table_17_column_231 is-center is-leaf el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">类别</div>
                </th>
                <th
                  colspan="2"
                  rowspan="1"
                  class="el-table_17_column_232 is-center el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">0类区(疗养区)</div>
                </th>
                <th
                  colspan="2"
                  rowspan="1"
                  class="el-table_17_column_235 is-center el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">1类区(居民区)</div>
                </th>
                <th
                  colspan="2"
                  rowspan="1"
                  class="el-table_17_column_238 is-center el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">2类区(混合区)</div>
                </th>
                <th
                  colspan="2"
                  rowspan="1"
                  class="el-table_17_column_241 is-center el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">3类区(工业区)</div>
                </th>
                <th
                  colspan="2"
                  rowspan="1"
                  class="el-table_17_column_244 is-center el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">4类区(交通干线)</div>
                </th>
                <th
                  colspan="2"
                  rowspan="1"
                  class="el-table_17_column_247 is-center el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">4b类区(铁路干线)</div>
                </th>
                <th class="el-table__cell gutter" style="width: 0px; display: none;"></th>
              </tr>
              <tr class>
                <th
                  colspan="1"
                  rowspan="1"
                  class="el-table_17_column_232_column_233 is-center is-leaf el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">昼间</div>
                </th>
                <th
                  colspan="1"
                  rowspan="1"
                  class="el-table_17_column_232_column_234 is-center is-leaf el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">夜间</div>
                </th>
                <th
                  colspan="1"
                  rowspan="1"
                  class="el-table_17_column_235_column_236 is-center is-leaf el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">昼间</div>
                </th>
                <th
                  colspan="1"
                  rowspan="1"
                  class="el-table_17_column_235_column_237 is-center is-leaf el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">夜间</div>
                </th>
                <th
                  colspan="1"
                  rowspan="1"
                  class="el-table_17_column_238_column_239 is-center is-leaf el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">昼间</div>
                </th>
                <th
                  colspan="1"
                  rowspan="1"
                  class="el-table_17_column_238_column_240 is-center is-leaf el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">夜间</div>
                </th>
                <th
                  colspan="1"
                  rowspan="1"
                  class="el-table_17_column_241_column_242 is-center is-leaf el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">昼间</div>
                </th>
                <th
                  colspan="1"
                  rowspan="1"
                  class="el-table_17_column_241_column_243 is-center is-leaf el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">夜间</div>
                </th>
                <th
                  colspan="1"
                  rowspan="1"
                  class="el-table_17_column_244_column_245 is-center is-leaf el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">昼间</div>
                </th>
                <th
                  colspan="1"
                  rowspan="1"
                  class="el-table_17_column_244_column_246 is-center is-leaf el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">夜间</div>
                </th>
                <th
                  colspan="1"
                  rowspan="1"
                  class="el-table_17_column_247_column_248 is-center is-leaf el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">昼间</div>
                </th>
                <th
                  colspan="1"
                  rowspan="1"
                  class="el-table_17_column_247_column_249 is-center is-leaf el-table__cell"
                  style="background: rgb(32, 91, 187); color: rgb(255, 255, 255); font-size: 14px; height: 40px; padding: 0px;"
                >
                  <div class="cell">夜间</div>
                </th>
                <th class="el-table__cell gutter" style="width: 0px; display: none;"></th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="el-table__body-wrapper is-scrolling-none">
          <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 1247px;">
            <colgroup>
              <col name="el-table_17_column_229" width="100" />
              <col name="el-table_17_column_230" width="100" />
              <col name="el-table_17_column_231" width="87" />
              <col name="el-table_17_column_232_column_233" width="80" />
              <col name="el-table_17_column_232_column_234" width="80" />
              <col name="el-table_17_column_235_column_236" width="80" />
              <col name="el-table_17_column_235_column_237" width="80" />
              <col name="el-table_17_column_238_column_239" width="80" />
              <col name="el-table_17_column_238_column_240" width="80" />
              <col name="el-table_17_column_241_column_242" width="80" />
              <col name="el-table_17_column_241_column_243" width="80" />
              <col name="el-table_17_column_244_column_245" width="80" />
              <col name="el-table_17_column_244_column_246" width="80" />
              <col name="el-table_17_column_247_column_248" width="80" />
              <col name="el-table_17_column_247_column_249" width="80" />
            </colgroup>
            <tbody>
              <tr class="el-table__row" style="height: 40px;">
                <td
                  rowspan="3"
                  colspan="1"
                  class="el-table_17_column_229 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">2022-1到2022-4</div>
                </td>
                <td
                  rowspan="3"
                  colspan="1"
                  class="el-table_17_column_230 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">17个城市（包含县域）</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_231 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">监测点次</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_233 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">4</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_234 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">4</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_236 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">964</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_237 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">964</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_239 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">2791</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_240 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">2791</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_242 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">940</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_243 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">940</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_245 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">794</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_246 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">794</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_248 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">223</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_249 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">223</div>
                </td>
              </tr>
              <tr class="el-table__row el-table__row--striped" style="height: 40px;">
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_231 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">达标点次</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_233 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">4</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_234 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">4</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_236 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">894</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_237 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">749</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_239 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">2615</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_240 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">2534</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_242 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">936</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_243 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">805</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_245 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">680</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_246 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">467</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_248 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">195</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_249 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">103</div>
                </td>
              </tr>
              <tr class="el-table__row" style="height: 40px;">
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_231 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">达标率(%)</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_233 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">100.0</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_234 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">100.0</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_236 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">92.7</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_237 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">77.7</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_239 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">93.7</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_240 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">90.8</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_242 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">99.6</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_243 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">85.6</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_245 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">85.6</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_246 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">58.8</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_248 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">87.4</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_249 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">46.2</div>
                </td>
              </tr>
              <tr class="el-table__row el-table__row--striped" style="height: 40px;">
                <td
                  rowspan="3"
                  colspan="1"
                  class="el-table_17_column_229 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">2022-1到2022-4</div>
                </td>
                <td
                  rowspan="3"
                  colspan="1"
                  class="el-table_17_column_230 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">17个城市城区</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_231 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">监测点次</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_233 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">4</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_234 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">4</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_236 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">964</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_237 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">964</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_239 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">2791</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_240 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">2791</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_242 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">940</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_243 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">940</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_245 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">794</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_246 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">794</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_248 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">223</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_249 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">223</div>
                </td>
              </tr>
              <tr class="el-table__row" style="height: 40px;">
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_231 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">达标点次</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_233 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">4</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_234 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">4</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_236 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">894</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_237 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">749</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_239 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">2615</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_240 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">2534</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_242 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">936</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_243 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">805</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_245 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">680</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_246 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">467</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_248 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">195</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_249 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">103</div>
                </td>
              </tr>
              <tr class="el-table__row el-table__row--striped" style="height: 40px;">
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_231 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">达标率(%)</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_233 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">100.0</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_234 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">100.0</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_236 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">92.7</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_237 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">77.7</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_239 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">93.7</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_240 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">90.8</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_242 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">99.6</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_243 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">85.6</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_245 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">85.6</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_246 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">58.8</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_248 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">87.4</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_249 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">46.2</div>
                </td>
              </tr>
              <tr class="el-table__row" style="height: 40px;">
                <td
                  rowspan="3"
                  colspan="1"
                  class="el-table_17_column_229 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">2022-1到2022-4</div>
                </td>
                <td
                  rowspan="3"
                  colspan="1"
                  class="el-table_17_column_230 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">13个地级城市（城区）</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_231 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">监测点次</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_233 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">4</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_234 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">4</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_236 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">944</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_237 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">944</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_239 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">2743</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_240 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">2743</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_242 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">920</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_243 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">920</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_245 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">774</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_246 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">774</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_248 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">219</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_249 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">219</div>
                </td>
              </tr>
              <tr class="el-table__row el-table__row--striped" style="height: 40px;">
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_231 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">达标点次</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_233 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">4</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_234 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">4</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_236 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">875</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_237 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">731</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_239 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">2571</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_240 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">2489</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_242 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">916</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_243 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">785</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_245 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">660</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_246 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">455</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_248 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">191</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_249 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">99</div>
                </td>
              </tr>
              <tr class="el-table__row" style="height: 40px;">
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_231 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">达标率(%)</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_233 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">100.0</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_232_column_234 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">100.0</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_236 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">92.7</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_235_column_237 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">77.4</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_239 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">93.7</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_238_column_240 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">90.7</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_242 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">99.6</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_241_column_243 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">85.3</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_245 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">85.3</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_244_column_246 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">58.8</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_248 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">87.2</div>
                </td>
                <td
                  rowspan="1"
                  colspan="1"
                  class="el-table_17_column_247_column_249 is-center el-table__cell"
                  style="padding: 0px;"
                >
                  <div class="cell">45.2</div>
                </td>
              </tr>
              <!---->
            </tbody>
          </table>
          <!---->
          <!---->
        </div>
        <!---->
        <!---->
        <!---->
        <!---->
        <div class="el-table__column-resize-proxy" style="display: none;"></div>
      </div>
    </div>

注意： 请传递完整有效的HTML（包括DOCTYPE、html和body标记）。重要提示：这可能不太方便，但可以在 style 标记中包含 CSS 规则。

    // 导出html为word
    htmlExportWord() {
      console.log('html导出word');

      let html = `<div id="目录">
                    <h1 style="text-align: center;font-size: 35px">2023年1-4噪声功能区季度报告</h1>
                    <h3 style="text-align: center;font-size: 25px">目录</h3>
                  </div>`;

      let tableHtml = document.getElementById('eleTable').innerHTML;

      let htmlStr = `
                      <!DOCTYPE html>
                      <html lang="en">
                      <head>
                        <meta charset="UTF-8">
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <title>Document</title>
                      </head>
                      <body>
                        ${html}
                        ${tableHtml}
                      </body>
                      </html>
                    `;
      console.log(htmlStr);

	  // 1.直接导出
      const converted = htmlDocx.asBlob(htmlStr, {
        orientation: "landscape",  // 跨域设置
      });

      if (window.navigator.msSaveBlob) {
        // 兼容IE浏览器
        window.navigator.msSaveBlob(converted, 'exported.docx');
      } else {
        const link = document.createElement('a');
        link.href = URL.createObjectURL(converted);
        link.download = '季度报告-element ul table.docx';
        link.click();
      }

      // 2.使用file-saver插件导出
      // saveAs(
      //   htmlDocx.asBlob(htmlStr, {
      //     orientation: "landscape",  // 跨域设置
      //   }),
      //   // 文件名
      //   '季度报告.doc'
      // )


    },

效果：
在这里插入图片描述
在这里插入图片描述
问题： table太长显示不全，但是可以在html中写样式让表格显示完全。

_Tough_Girl
关注
专栏目录
vue前端html页面导出word文件,Vue-纯前端导出word文档
weixin_29038345的博客
06-04 3641
在项目中，我们可以借助后端返回文件流实现文件下载。如果前端有数据，也可以借助前端框架进行下载。本文将介绍如何在前端纯js实现word文档导出。1. 组件介绍要实现前端纯js导出word文档，我们需要用到docxtemplater，jszip-utils，file-saver三个组件，接下来简要的介绍以下三个组件。1.1 docxtemplaterdocxtemplater 使用 JSON 数据格式...
VUE动态生成word的实现
10-15
主要介绍了VUE动态生成word的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3+TS实现将html或富文本编辑器转为Word并下载
A Lucky Boy的博客
05-14 907
实现将html或富文本编辑器转为Word并下载
vue html转pdf
02-28
vue框架中html转pdf代码，很实用，适合项目常用作为工具类和平时开发调试用。
vue中html导出成word
morningttt的博客
06-05 633
参考链接：https://blog.csdn.net/weixin_47494533/article/details/137018678。vue 中将 html 中内容转换为 word 文档导出，无需模板，可以导出 echarts 图表。先将html中内容获取，之后将页面上的元素转成图片,然后把图片放到word文件中进行导出。使用 html-docx-js、file-saver。2、创建 exportToWord.js，添加导出方法。
vue 导出 HTML 结构为 Word 文档（.docx）-支持表格、css样式、图片
少年感
12-25 5085
这篇博客将为你详细解读如何借助两个强大的工具 html-docx-js 和 FileSaver.js，实现将 HTML 结构导出为 DOCX 文件。首先，介绍这两个工具的 GitHub 仓库地址，方便读者深入研究。随后，深入剖析代码，详细说明了构建包含 HTML 内容的完整 HTML 文档字符串的过程，以及如何通过这两个工具实现 HTML 到 Word 文档的转换和保存。这篇博客力求简练明了，使读者能够迅速了解并应用于实际项目中，为前端开发者提供了实用而高效的指南。
vue实现html转word与word浅析
最新发布
四木的博客
06-13 1380
vue实现html转.docx文件，浅析word结构
【Vue】vue中将 html 或者 md 导出为 word 文档
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
05-09 930
是你使用的 md 编辑器的预览容器id。
vue导出html、word和pdf的实现代码
10-18
本文介绍了在Vue.js框架下，如何实现将HTML页面、Word文档和PDF文件导出的功能。以下是从标题、描述、标签和部分内容中提取的详细知识点： ### Vue.js导出HTML文件 Vue.js提供了多种方法将页面内容导出为HTML文件...
vue导出word功能
02-20
这就是在Vue项目中实现从Echarts图表和表格数据导出Word文档的基本流程。根据实际需求，可能还需要处理数据格式化、样式调整、错误处理等细节问题。记住，测试不同浏览器和设备的兼容性，以确保导出功能在各种环境下...
vue实现word，pdf文件的导出功能
10-18
在现代的Web应用开发中，常常需要实现文档导出功能，例如导出Word文档或PDF文件。Vue.js作为一个流行的前端JavaScript框架，也支持这种功能的实现。本文将详细解释如何使用Vue.js实现文件导出功能，特别针对Word和...
vue中实现将html导出为word/excel
Stitch_xiao的博客
06-22 5851
需求：将页面整成理想样式，将想要的那一部分页面导出成word,不用写模板，按照当前页面样式导出即可。第四步：获取dom节点myContainer并导出（我写的行内样式）第二步：给到处那部分的容器起个id名。第三步：在需要的地方引入依赖。第一步：安装需要的依赖。
Vue前端导出标准格式word（承接上一篇Vue纯前端导出word）
qq_41154522的博客
07-14 1160
设置html为<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"&gt.
vue把html导出为word
m0_47408822的博客
11-02 3438
1 首先安装 file-saver和html-docx-js npm install file-saver --save npm install html-docx-js --save 2.引入 import { saveAs } from 'file-saver'; import htmlDocx from 'html-docx-js/dist/html-docx'; 3.导出html为word let arr = document.querySelector('#question_doc') /
vue前端实现导出页面为word(两种方法)
Z18834071903的博客
03-08 6138
vue前端实现导出页面为word(两种方法)
vue如何把html转换word,vue 如何实现页面以word文件导出
weixin_42613360的博客
05-31 960
word文档本质是一个XML文件，可以用html，直接在前端导出一份word文档是可行的。下面是以前做的excel文件导出。// 导出文件// exportObj = [{// href: '附件下载的路径',// tips: '下载时的提示',// data: '本地文件导出的内容',// opt: { type:"text/plain" },// fileName: '当为...
将HTML导出生成word文档
ycs_0405的专栏
11-14 401
转自：https://www.cnblogs.com/aaron-pan/p/7132059.html 通过jquery.wordexport.js导出word 备注：兼容IE9以上 大概浏览了下jquery.wordexport.js插件的代码，了解到了通过该插件可以导出文本和图片，而图片首先通过canvas的形式 绘制，文本则需要再依赖FileSaver.js插件，FileSaver.js插件则主要通过H5的文件操作新特性new Blob()和new FileReader() 来实现文本的导出
html转word的原理,vue导出html、word原理
weixin_42545066的博客
05-30 397
vue导出html、word原理日期：2020-06-10来源：程序思维浏览：1313次今天给大家说说如何用vue导出html静态页面和word的原理。由于导出word时，页面样式无法正常使用，因此整体页面采用table布局，仅在几个地方添加style样式，没有其余样式：/*** 当页面中有canvas时，我的做法是* 在页面中预先放置一个src为空的img标签* 点击导出时，将canvas转为b...
vue 项目调用jquery插件jquery.wordexport.js将HTML导出生成word文档
wwf1225的博客
03-11 3153
vue 项目调用jquery插件jquery.wordexport.js将HTML导出生成word文档 1.利用vue-cli2.0创建一个vue项目： 第一步：vue install -g vue-cli （全局安装，安装一次就行，下次创建项目可以直接执行第二步）安装完毕，用命令vue -V(注意大写)，输出vue版本，说明安装成功，下次就不用安装了 第二部：vue init webpa...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值