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

})
相关推荐
跳动的喵尾巴5 小时前
Endnote | word中加载项消失不见,如何处理?
word
夜白宋5 小时前
【word多文档docx合并】
java·word
lijun_xiao20096 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔6 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼6 小时前
JavaWeb_p165部门管理
java·开发语言·前端
90后的晨仔6 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔7 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀7 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP7 小时前
Ajax 详解
java·前端·ajax·javaweb
非凡ghost8 小时前
Typora(跨平台MarkDown编辑器) v1.12.2 中文绿色版
前端·windows·智能手机·编辑器·软件需求