1、安裝依賴,，因?yàn)槲业捻?xiàng)目中用的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、給需要導(dǎo)出的元素設(shè)置id屬性

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

4、導(dǎo)出方法

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' })
    })
  }