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

})
相关推荐
好运yoo5 分钟前
npm install的原理
前端·npm
Jiaberrr9 分钟前
uniapp 安卓 APP 后台持续运行(保活)的尝试办法
android·前端·javascript·uni-app·app·保活
不老刘10 分钟前
uniapp+vue3实现CK通信协议(基于jjc-tcpTools)
前端·javascript·uni-app
蓝婷儿29 分钟前
第二章支线八 ·CSS终式:Tailwind与原子风暴
前端·css
vanora11111 小时前
Vue在线预览excel、word、ppt等格式数据。
前端·javascript·vue.js
树上有只程序猿1 小时前
低代码不是炫技,而是回归需求的必然答案
前端
比特森林探险记1 小时前
Go 中 map 的双值检测写法详解
java·前端·golang
溪饱鱼1 小时前
React源码阅读-fiber核心构建原理
前端·javascript·react.js
陈随易1 小时前
Element Plus 2.10.0 重磅发布!新增Splitter组件
前端·后端·程序员
陈随易1 小时前
2025年100个产品计划之第11个(哆啦工具箱) - 像哆啦A梦口袋一样丰富的工具箱
前端·后端·程序员