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

})
相关推荐
Aphasia3116 分钟前
前端面试之页面渲染规则📖
前端·面试
星之卡比*11 分钟前
前端知识点---闭包(javascript)
开发语言·前端·javascript
东方芷兰20 分钟前
JavaWeb 课堂笔记 —— 03 Vue
java·前端·javascript·vue.js·笔记
二十秒的勇气26 分钟前
HarmonyOS:组件布局保存至相册
前端
luback1 小时前
页面编辑器CodeMirror初始化不显示行号或文本内容
前端·codemirror
一勺-_-1 小时前
Chrome浏览器和Microsoft Edge浏览器的导出收藏链接
前端·chrome·edge
无名之逆1 小时前
[特殊字符] 超轻高性能的 Rust HTTP 服务器 —— Hyperlane [特殊字符][特殊字符]
java·服务器·开发语言·前端·网络·http·rust
蘑菇头爱平底锅1 小时前
数字孪生-DTS-孪创城市-导览功能、虚拟现实
前端·数据可视化
一口一个橘子2 小时前
[ctfshow web入门] web40
前端·web安全·网络安全
Z编程2 小时前
vue3实现markdown工具栏的点击事件监听
前端·javascript·vue.js