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

})
相关推荐
aiwery2 分钟前
大模型场景下的推送技术选型:轮询 vs WebSocket vs SSE
前端·agent
会豪3 分钟前
前端插件-不固定高度的DIV如何增加transition
前端
却尘3 分钟前
Server Actions 深度剖析(2):缓存管理与重新验证,如何用一行代码干掉整个客户端状态层
前端·客户端·next.js
小菜全4 分钟前
Vue 3 + TypeScript 事件触发与数据绑定方法
前端·javascript·vue.js
Hilaku7 分钟前
面试官开始问我AI了,前端的危机真的来了吗?
前端·javascript·面试
shellvon1 小时前
前端攻防:揭秘 Chrome DevTools 与反调试的博弈
前端·逆向
β添砖java1 小时前
案例二:登高千古第一绝句
前端·javascript·css
却尘1 小时前
Server Actions 深度剖析:这就是个披着 React 外衣的 RPC
前端·rpc·next.js
南雨北斗1 小时前
Vue 3 修饰符(Modifiers)
前端
会豪1 小时前
工业仿真(simulation)--前端(七)--消息栏
前端