前端将后端返回的富文本格式字符串转换成word下载

桥志三

已于 2023-05-29 16:09:12 修改

阅读量727

点赞数

文章标签：前端 javascript word

于 2023-05-29 11:41:17 首次发布

本文链接：https://blog.csdn.net/akkigg/article/details/130924638

版权

文章介绍了如何在项目中安装并使用html-docx-js、file-saver和dayjs这三个库来处理富文本并生成.docx文件。在执行过程中遇到的严格模式下不支持with语句的错误，通过查找并修改源码中的with语句得以解决，最终实现了文档的正常下载功能。

摘要由CSDN通过智能技术生成

需要用到三个库

npm install html-docx-js -S

npm install file-saver -S

npm install dayjs -S

或

pnpm install html-docx-js

pnpm install file-saver

pnpm install dayjs

引入三个库

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

downloadAnswerHandler 接受传来来的富文本字符串

const downloadAnswerHandler = (content: string) => {
const htmlString = `<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      ${content}
    </body>
    </html>`
  const BlobDocx: Blob = htmlDocx.asBlob(htmlString)

  // console.log(typeof BlobDocx, '格式类型', BlobDocx)

  saveAs(BlobDocx, `${'答案'}${dayjs().format('YYYY-MM-DD HH-mm-ss')}.docx`)
}

const BlobDocx: Blob = htmlDocx.asBlob(content) 执行这段代码时会报一段错误

因为在严格模式下不支持 with语句