Vue3项目中将html元素转换为word

下载插件

html转word插件

复制代码
pnpm i --save html-docx-js-typescript

生成临时链接

复制代码
pnpm i file-saver

代码部分

html部分,为要下载的部分用id做唯一标识

复制代码
<div :id="`mode-${chart.id}`">
           <pre><VueShowdown :markdown="chart.content"/></pre>
</div>

js部分

复制代码
// 遍历选中的元素
dom_options.value.forEach(async (item) => {
  // 获取dom
  const dom = document.querySelector(`#mode-${item}`)
  // 这里注意要将获取的dom转换为字符串
  const convertedFile = htmlDocx.asBlob(dom?.outerHTML!);
	
  // 生成链接并且下载
  const fileData = await convertedFile
  saveAs((fileData as Blob), 'file.docx')

})
相关推荐
问心无愧05136 小时前
ctf show web入门160 161
前端·笔记
李小白667 小时前
第四天-WEB服务器基本原理,IIS服务
运维·服务器·前端
humcomm7 小时前
AI编程时代新前端职位
前端·ai编程
好家伙VCC7 小时前
Web Components主题热切换方案揭秘
java·前端
甲维斯8 小时前
Kimi版超级玛丽效果“惊人”,配额不足5厘米!
前端·人工智能
hboot8 小时前
AI工程师第一课 - Python
前端·后端·python
凉菜凉凉8 小时前
AI时代,被抛弃的前端
前端·ai
console.log('npc')8 小时前
AI前端工程与生成式UI学习路线
前端·人工智能·ui
梦曦i9 小时前
uni-router v1.1.1发布:守卫超时保护+路由监听
前端·uni-app
qq_2518364579 小时前
基于java Web网络订餐系统设计与实现 源码文档
java·开发语言·前端