vue集成富文本和导入导出

vue 插件

集成markdown

官网：https://github.com/hinesboy/mavonEditor/blob/master/README.md

需要编辑时候

<template>
<div>
<!--    @imgAdd监听图片上传操作,配置图片上传-->
<mavon-editor v-model="content" @imgAdd="imageAdd" ref="md"></mavon-editor>
  <el-button type="primary" @click="getContent">获取</el-button>
</div>
</template>
<!--:toolbarsFlag="false" :subfield="false" defaultOpen= "preview"-->
<script>
import axios from "axios";
export default {
  name: "index",
  data(){
    return{
      content:'# fdsfsa'
    }
  },
  methods:{
    //点击上传图片则触发该方法，parms1：图片位置（第几个图片）,param2:图片信息
    imageAdd(ind,$f){
      const path="http://localhost:8088"
      let data=new FormData();
      data.append("file",$f);
      axios.post(path+"/test/upload",data,{
        headers:{
          "Content-Type":"multipart/form-data"
        }
      }).then(res=>{
        const d=res.data;
        if(d.code===200){
          this.$refs.md.$img2Url(ind,path+"/img/"+d.fileName)
        }
      })

    },
    getContent(){
  		        
        //获取html信息，
      console.log(this.$refs.md.d_render)
        //获取markdown源码
      console.log(this.$refs.md.d_value)
    
    }
  }
}
</script>

预览

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qdwwSbVr-1667919023950)(C:\Users\ljj\Desktop\y1.png)]

获得提交信息:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CNVqf4uA-1667919023952)(C:\Users\ljj\Desktop\y2.png)]

不需要编辑，只用于用户浏览

<!--只需要配置以下参数，就只用于显示了-->
<mavon-editor v-model="content" :toolbarsFlag="false" :subfield="false" defaultOpen= "preview"></mavon-editor>

预览

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ej8dGBQ8-1667919023952)(C:\Users\ljj\Desktop\y3.png)]

导出数据

npm install vue-json-excel

在main.js中导入

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

在需要用到的模块中使用

  <download-excel
        class = "export-excel-wrapper"
        :data = "tableData"
        :fields = "json_fields"
        name = "测试.xls">
      <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
      <el-button type="primary" size="small" @click="exportData">导出EXCEL</el-button>
    </download-excel>

然后点击按钮，就能下载为excel文件了

---

导入csv

Vue项目导入导出csv文件 - 我是ed - 博客园 (cnblogs.com)

npm install papaparse      安装

  import Papa from 'papaparse'       //在需要使用的界面上导入即可

/**
        * by wjw
        * 导出指令csv文件
        */
      exportCsv(){
        var csv = Papa.unparse(导出的数据); 
        //定义文件内容，类型必须为Blob 否则createObjectURL会报错
        let content = new Blob([csv]);
        //生成url对象
        let urlObject = window.URL || window.webkitURL || window;
        let url = urlObject.createObjectURL(content);
        //生成<a></a>DOM元素
        let el = document.createElement("a");
        //链接赋值
        el.href = url;
        el.download = "文件导出.cvs";
        //必须点击否则不会下载
        el.click();
        //移除链接释放资源
        urlObject.revokeObjectURL(url);
      },

导出csv

<!--解决方案-->

<el-button type="success" @click="changeFile">导入csv</el-button>
    <input type="file" style="display: none;" ref="file" id="file" @change="inportCsv">

<script>
export default{
    
    
      changeFile(){
        document.getElementById("file").click()//模拟点击选择文件框
      },
      inportCsv(){//导入文件的代码
        const file=this.$refs.file.files[0]
        const name=file.name
      let suffix=(name.substring(name.lastIndexOf(".")).replace(".",''))
        if(suffix!=='csv'){
          return this.$message.error("只能是csv文件")
        }
        var reader = new FileReader();//获取读对象
        reader.readAsDataURL(file)//加载需要读的文件
        reader.οnlοad=()=>{
          Papa.parse(file, {//解析文件
            encoding:"utf-8",
            complete: res => {
              let data=res.data
              let d=data.filter((item,index)=>{//过滤
                return item.length===3&&index!==0;
              })
             d.map(item=>{
               let stud={"name":item[0],"age":item[1],"school":item[2]}
               this.tableData.push(stud)
             })
            }
          });
        }
      },
}
</script>

集成富文本编辑器

简单使用

​ https://www.wangeditor.com/v5/menu-config.html

​ 使用wangedito很好用

<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        @onChange="changeContent"
        style="height: 500px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
    />
  </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount,ref, shallowRef ,defineEmits,onMounted} from 'vue'
import {request} from "@/utils/request";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import pubsub from 'pubsub-js'


const emit=defineEmits()
// 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()
    // 内容 HTML
    const valueHtml =ref('')
    const toolbarConfig = {}
    const editorConfig = { placeholder: '请输入内容...',MENU_CONF:{}}

    editorConfig.MENU_CONF['uploadImage']={
      // 自定义上传
        async customUpload(file, insertFn) {                   // JS 语法
        // file 即选中的文件
          let d=new FormData()
          d.append("file",file)
          const{data:data}=await request.post("/upload",d)
          insertFn('http://localhost'+data.data.url,'','')
      }

    }
    //订阅，清除信息
onMounted(()=>{
  pubsub.subscribe("clear",(name,v)=>{
    valueHtml.value=v
  })
})
    //编辑框发生变化时候
const changeContent=()=>{
    emit("change",valueHtml.value)//将最新的编辑框的信息发送到父组件
}
    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

</script>