Vue3+TS实现将html或富文本编辑器转为Word并下载

A Lucky Boy

已于 2024-05-14 14:48:36 修改

阅读量346

点赞数 10

分类专栏： vue typescript 文章标签： html word 前端

于 2024-05-14 14:35:19 首次发布

本文链接：https://blog.csdn.net/weixin_43797577/article/details/138854324

版权

vue 同时被 2 个专栏收录

7 篇文章 2 订阅

订阅专栏

typescript

1 篇文章 0 订阅

订阅专栏

说明：我用的富文本编辑器是wangEditor：
wangEditor官网

安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save
yarn add html-docx-js-typescript
# 或者  npm install html-docx-js-typescript --save-dev

在所需页面中引入资源

import '@wangeditor/editor/dist/css/style.css' // 引入 富文本编辑器css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'//富文本编辑器
import { asBlob } from 'html-docx-js-typescript';//将html转为word

wangeditor+vue3+TS 实现Web 富文本编辑器

HTML部分

<el-button type="primary" plain @click="exportDoc">
  导出文档
</el-button>
<div style="border: 1px solid #ccc">
  <Toolbar
    style="border-bottom: 1px solid #ccc"
    :editor="editorRef"
    :default-config="toolbarConfig"
    :mode="mode"
  />
  <Editor
    v-model="valueHtml"
    style="height: 500px; overflow-y: hidden;"
    :default-config="editorConfig"
    :mode="mode"
    @on-created="handleCreated"
  />
</div>

JavaScript部分

<script setup lang="ts">
 // 编辑器实例，必须用 shallowRef
 const editorRef = shallowRef()
 const mode = ref('default')
 // 内容 HTML
 const valueHtml = ref('')
 // 工具栏配置项
 const toolbarConfig: Partial<IToolbarConfig> = {}
 const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} }
 // 组件销毁时，也及时销毁编辑器
 onBeforeUnmount(() => {
   const editor = editorRef.value
   if (editor == null)
     return
   editor.destroy()
 })
 function handleCreated(editor: any) {
   editorRef.value = editor // 记录 editor 实例，重要！
 }
 // 导出文档
 async function exportDoc() {
   const editor = editorRef.value
   // 将富文本内容拼接为一个完整的html
   const html = editor.getHtml()
   const value =  `<!DOCTYPE html>
   <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Document</title>
      </head>
      <body>
         ${html}
      </body>
    </html>
     //  landscape就是横着的，portrait是竖着的，默认是竖屏portrait。
    const data = await asBlob(value, { orientation: 'portrait' }) as Blob
    const a= document.createElement('a')
    a.href = window.URL.createObjectURL(data)
    a.setAttribute('download', 'document.docx')
    a.click()
    // 下载后将标签移除
    a.remove()
 }
</script>