vue中利用富文本编辑器实现将输入文本字符串类型转为txt文件下载输出以及以txt文件格式传递至后端，进行数据交互

vue中利用富文本编辑器实现将输入文本字符串类型转为txt文件下载输出以及以txt文件格式传递至后端，进行数据交互

1、安装插件

npm install vue-quill-editor --save //富文本编辑器
npm install file-saver --save//字符串转txt文件

2、main.js引入

// 引入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
import {saveAs} from 'file-saver';
//==========利用富文本编辑器将输入的内容转化为txt文件格式

3、模板使用

<template>
   <div>
    富文本编辑器
    <div class="text_border">
          <quill-editor v-model="FA_input" @blur="FA_noshow()"></quill-editor>
     </div>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; // 导入quillEditor组件
export default {
  data(){
    return{
      IA_inputw:"",
      FA_input:""
    
    }
  },
  methods:{
 // 选项A富文本框失去焦点时触发该方法
    FA_noshow() {
      // 失去焦点时提取富文本编辑器中的纯文本，这行代码至关重要（不转换输出的文本将带着标签）！！！！！！
      this.IA_inputw = this.FA_input.replace(/<[^<>]+>/g, "").replace(
        /&nbsp;/gi,
        ""
      );
      console.log("富文本编辑器输出内容为：" + this.FA_input);
      console.log("==========================================");
      console.log("富文本编辑器转换后输出文本为：" + this.IA_inputw);

      // let str = new Blob([this.IA_inputw], {type: 'text/plain;charset=utf-8'});
      // saveAs(str, `富文本数据转为txt文件.txt`);
      //这两行可以使得富文本编辑器内的字符串以txt文件格式输出下载

      this.uploadClick(this.IA_inputw)//调用此方法是为了将字符串以txt文件格式传递数据给后端
    },
    async uploadClick(str) {
      const fileContent = new File([str], '测试.txt',{type: ''})
        const file = new FileReader(fileContent)
        // 文件上传传参是formdata格式
        const formdata = new FormData()
        // 模仿单文件上传给接口传参
        formdata.append('file', fileContent) 
          console.log(fileContent)
        const data = await this.axios({
          url: 'http://192.168.2.**:8***',
          method: 'post',
          // content-type表示具体请求中的媒体类型信息,这里需要定义为'multipart/form-data'
          headers: { 'content-type': 'multipart/form-data' },
          data: formdata
        })
},
  },
   components: {
    quillEditor
   },
}
</script>

4、实现功能