Vue-elementUI 添加Excel导出功能和富文本编辑功能

由于最近业务需求，需要在表单内添加Excel导出和富文本（tinymce）编辑功能，故记录一下导入步骤

VUE导出Excel表格功能

1. 先安装三个依赖

npm install -S file-saver xlsx
npm install -D script-loader

2. 放置模板文件

在src同级目录下新建一个文件名为（vendor）【名字自己喜欢蛤~】
vendor文件内放置Blob.js 和 Export2Excel.js （文件可在vue-element-admin拉取）

3. 然后在使用的组件内添加

• 1. 模板template

    导出

• 2. methods添加两个方法

handleDownload() {
    this.downloadLoading = true
    import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['序号', '发送开始时间', '发送截止时间']  //excel 表头
        const filterVal = ['billCode', 'screenId', 'updateTime']  //获取的数据字段名
        const list = this.sendDtlList   //所要生成Excel数据源
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: this.filename,
            autoWidth: this.autoWidth
        })
        this.downloadLoading = false
    })
},
formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
            return parseTime(v[j])
        } else {
            return v[j]
        }
    }))
},

4.备注

注：如果webpack报解析错误：

在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),

即可解决
另：alias是配置别名

Vue中添加富文本富文本（tinymce）编辑功能

1. 在static文件夹内放入tinymce组件包（我用的是tinymce4.7.5）

image.png

2. 在index.html内添加

引入tinymce

image.png

3. 在components文件夹内放入组件包（Tinymce）

image.png

4. 注入组件

• 在所需注入的组件内引入Tinymce组件
  import Tinymce from '@/components/Tinymce'

• 注入组件
  components: { Tinymce }

• data内绑定数据

data:{
    return{
        content:" ",
    }
}

5. 在所在组件内模板中添加

   //引入组件
   //显示输入的文字

6.根据所需配置需要的功能

image.png

• 由于我的项目只需要文本编辑，故只按需配置了文本的功能。

plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
toolbar: `bold italic underline strikethrough | fontsizeselect 
                    | forecolor backcolor |  bullist numlist 
                    | outdent indent blockquote | undo redo |  removeformat 
                    | alignleft aligncenter alignright alignjustify `,

• 更多配置可以到官网看
  tinymce官网