【vue富文本编辑器+转换成word下载】

最新推荐文章于 2024-06-24 11:52:02 发布

等狗齐再开团

最新推荐文章于 2024-06-24 11:52:02 发布

阅读量939

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/SunZhengLe/article/details/126662269

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<template>
  <div>
    <div style="border: 1px solid #ccc;">
      <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
      />
      <Editor
          style="height: 500px; overflow-y: hidden;"
          v-model="html"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"
      />
    </div>
    <button @click="handleCosole,download()">输出内容</button>
  </div>
</template>
<script>
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    import htmlDocx from 'html-docx-js/dist/html-docx';
    import saveAs from 'file-saver';
    export default{
        name:'order',
        components: { Editor, Toolbar },
        data() {
            return {
                editor: null,
                html: '<p>hello</p>',
                toolbarConfig: { },
                editorConfig: { placeholder: '请输入内容...' },
                mode: 'default', // or 'simple'
            }
        },
        methods: {
            onCreated(editor) {
                this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
            },
            handleCosole() {
              console.log(this.editor.getHtml());
            },
            download(){
              console.log(this.editor.getHtml());
              let rec = this.editor.getHtml();
              let htmlStr = rec;
              let page = `<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>${htmlStr}        
                  </body></html>`
              // console.log(page);return
              saveAs(
                  htmlDocx.asBlob(page, {
                      orientation: "landscape"//跨域设置
                  }),
                  //文件名
                  rec.name+".doc"
              )
            }
        },
        mounted() {
            // 模拟 ajax 请求，异步渲染编辑器
            setTimeout(() => {
                this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
            }, 1500)
        },
        beforeDestroy() {
            const editor = this.editor
            if (editor == null) return
            editor.destroy() // 组件销毁时，及时销毁编辑器
        }
    }
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

https://www.wangeditor.com/ 开源 Web 富文本编辑器，开箱即用，配置简单,蛮好用的。

npm install @wangeditor/editor file-saver html-docx-js --save