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

})
相关推荐
不知名用户来了几秒前
基于vue3 封装的antdv/element-Plus 快速生成增删改查页面
前端
明川6 分钟前
Android Gradle - ASM + AsmClassVisitorFactory插桩使用
android·前端·gradle
布列瑟农的星空7 分钟前
webpack迁移rsbuild——配置深度对比
前端
前端小黑屋9 分钟前
查看项目中无引用到的文件、函数
前端
前端小黑屋10 分钟前
小程序直播挂件Pendant问题
前端·微信小程序·直播
俊男无期14 分钟前
超效率工作法
java·前端·数据库
LYFlied15 分钟前
【每日算法】LeetCode 46. 全排列
前端·算法·leetcode·面试·职场和发展
刘一说18 分钟前
Vue Router:官方路由解决方案解析
前端·javascript·vue.js
wgego23 分钟前
Polar靶场web 随记
前端
DEMO派29 分钟前
深拷贝 structuredClone 与 JSON 方法作用及比较
前端