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属性

      
{{ schemeInfo?.scYear }}年{{ schemeInfo?.scProjectName }}
      
一、指导思想及部署思路
      
指导思想
      
{{ schemeInfo?.guidingLight }}
      
部署思路
      
{{ schemeInfo?.deploymentRoadmap }}

4、导出方法

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

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