2023-09-25 html页面导出word

1、安装依赖,，因为我的项目中用的typescript，所以要安装此版本

npm i html-docx-js-typescript
npm i file-saver

2、引入依赖

import * as htmlDocx from 'html-docx-js-typescript'
import { saveAs } from 'file-saver'

3、给需要导出的元素设置id属性

<div id="export-box">
      <h1 style="text-align: center">{{ schemeInfo?.scYear }}年{{ schemeInfo?.scProjectName }}</h1>
      <h2>一、指导思想及部署思路</h2>
      <h3 class="paragraphs">指导思想</h3>
      <p class="paragraphs">{{ schemeInfo?.guidingLight }}</p>
      <h3 class="paragraphs">部署思路</h3>
      <p class="paragraphs">{{ schemeInfo?.deploymentRoadmap }}</p>
</div>

4、导出方法

function exportWord() {
    const fileName = `${schemeInfo.value?.scYear}年${schemeInfo.value?.scProjectName}`

    const htmlContent = document.getElementById('export-box')?.innerHTML
    htmlDocx.asBlob(<string>htmlContent).then(fileData => {
      saveAs(fileData as Blob, fileName + '.docx', { encoding: 'UTF-8' })
    })
  }