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

})
相关推荐
门思科技1 小时前
LoRaWAN 网络排障的五层漏斗:从"上不到云"到"数值不对",每一层该用什么工具证明
前端
计算机魔术师1 小时前
Cursor 官方插件商城现恶意 Claude Code 扩展,约 11 小时影响最多 5000 名开发者
前端
掘金者阿豪2 小时前
MongoDB迁移到金仓数据库:商品属性继续灵活存,订单报表交给 SQL
前端·后端
栉甜2 小时前
Vue2学习内容(上)
前端·javascript·vue.js·学习
梦曦i2 小时前
v0.2.0 架构升级:class + reactive 重塑状态管理
前端·uni-app x
布丁爱干饭2 小时前
寄给午后
前端
java1234_小锋3 小时前
【技术专题】CSS3 网页技术 - CSS3 布局进阶
前端·css·css3
zhippt_10143 小时前
只剩截图没有源文件?图转PPT把图片还原成可编辑幻灯片
前端·人工智能·powerpoint
shmily麻瓜小菜鸡3 小时前
TypeScript 知识点补充(第三部分:工程化与高级类型)
前端·javascript·typescript
10岁的博客4 小时前
Chrome 扩展安全攻防实录:从权限模型到真实漏洞复盘
前端·chrome·安全