代码编织梦想

说明:我用的富文本编辑器是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>
    
  • 效果图
    • Web 富文本编辑器富文本

      image.png

    • word文档
      image.png

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_43797577/article/details/138854324

JS-Typescript-爱代码爱编程

文章目录 环境类型注解接口工作原理可选属性只读属性类数据类型基础数据类型booleannumberstringArrayTupleenumanyvoidnull,undefinedneverobject ,Object类型断言ReadonlyArray变量声明let 环境 1. npm方式安装 npm install -g typescrip

vue 3.0(通用) 表格导出成Excel文件或HTML转word文档-爱代码爱编程

table导出excel 1. 安装依赖 npm install --save xlsx npm install --save file-saver file-saver是用来保存文件的,也是必须安装的。 2. 表格添加属性 标签添加ref属性,用于获取该元素el;也可添加id属性获取 <table ref="exportTableRe

wangeditor5-将内容转为word并下载-爱代码爱编程

WangEditor5-将内容转为Word并下载 1、创建工具栏类2、工具栏方法实现3、页面具体代码4、效果图编辑器中内容下载为word效果图 wangEditor官网https:

vue3——html-爱代码爱编程

一、下载 官方地址  html-doc-js - npm npm install html-doc-js 二、使用方法 // 使用页面中引入 import exportWord from 'html-doc-js' // 配置项以及实现下载方法 const wrap = document.getElementById('test')const

vue学习v-爱代码爱编程

Vue学习v-html 一、前言1、基本用法2、注意事项 二、总结 一、前言 学习 Vue.js 中的 v-html 指令意味着你想要在你的应用程序中动态地渲染 HTML。这个指令允许你将

html静态网页成品作业(html+css+js)——在线购物商城网页设计制作(4个页面)-爱代码爱编程

🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTML+CSS,使用Jav

vue3+ts引入富文本编辑器wangeditor_vue3 ts 富文本-爱代码爱编程

<template>     <div class="wang-editor">         <Toolbar             style="border-bottom: 1px solid #ccc"             :editor="editorRef"             :defaul

原生html table固定表头,后台返回一个数组对象有多个值,根据表头需要的字段显-爱代码爱编程

原生table动态循环生成内容dom HTML部分JavaScript部分Css部分效果图 原生html要实现固定表头并根据需要显示的字段渲染后端返回的数组对象,就需要使用JavaScript来渲