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

})
相关推荐
踩着两条虫11 小时前
VTJ:技术架构概述
前端·架构·ai编程
超级无敌攻城狮11 小时前
Agent 到底是怎么跑起来的
前端·后端·架构
吴声子夜歌11 小时前
Vue3——过度和动画效果
前端·vue.js·es6
Via_Neo12 小时前
字符串类型的相互转换
前端
zopple12 小时前
前端三剑客 vs Vue.js:核心区别解析
前端·javascript·vue.js
hsjcjh12 小时前
窗口函数-详细讲解分析
java·服务器·前端
CDN36012 小时前
【踩坑实录】前端开发必看:一次由CSS缓存引发的线上事故与SEO反思
前端·css·缓存
胡志辉的博客12 小时前
本地明明好好的,怎么一上线就跨域了?把同源策略、前后端分工和 CORS 一次讲明白
前端·javascript·vue.js·reactjs·nextjs·跨域
|晴 天|12 小时前
文章系列管理系统:拖拽排序与进度追踪
前端·vue.js·typescript
GISer_Jing12 小时前
AI Agent接口终局:MCP有弊端,CLI凭什么成为主流?
前端·人工智能