原生js输出html,使用原生js导出html为word带页码

要使用原生JavaScript输出HTML，并将其导出为Word文档并带有页码，可以按照以下步骤进行操作：

1. 首先，创建一个包含要导出为Word的HTML内容的div元素，并将其样式设置为不可见，隐藏在页面上。

<div id="exportContent" style="display: none;">
   <!-- 这里是要导出的HTML内容 -->
</div>

2. 使用JavaScript来将HTML内容输出为Word文档。

function exportToWord() {
  // 获取要导出的HTML内容
  var exportContent = document.getElementById("exportContent").innerHTML;

  // 创建新的Blob对象（文件）
  var blob = new Blob(['\ufeff', exportContent], { type: 'application/msword' });

  // 创建下载链接
  var url = URL.createObjectURL(blob);

  // 创建临时链接元素
  var link = document.createElement('a');
  link.href = url;

  // 设置链接属性，包括文件名和下载
  link.download = 'export.doc';
  link.click();

  // 释放URL对象
  URL.revokeObjectURL(url);
}

3. 在导出Word文档之前，需要确保页码正确地显示在HTML中。你可以使用CSS来设置页码的样式，并使用JavaScript来将页码插入到导出的HTML内容中。

@page {
  @bottom-right {
    content: "Page " counter(page);
  }
}

// 获取所有带有class为“page”的元素，并将页码插入其中
var pages = document.getElementsByClassName("page");
for (var i = 0; i < pages.length; i++) {
  var currentPage = i + 1;
  pages[i].innerHTML += "<span class='page-number'>Page " + currentPage + "</span>";
}

以上代码将页码插入带有class为“page”的所有元素中。

最后，在你想要触发导出操作的地方，例如一个按钮的点击事件中，调用exportToWord()函数即可导出HTML为带有页码的Word文档。

<button onclick="exportToWord()">导出为Word</button>

希望以上步骤能帮助你使用原生JavaScript输出HTML并导出为带有页码的Word文档。