由于最近业务需求，需要在表单内添加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. 然后在使用的组件内添加
- 模板template
<el-button class="button-add" @click="handleDownload" :loading="downloadLoading">
导出
</el-button>
- 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内添加
<script src='./static/tinymce4.7.5/tinymce.min.js'></script>
引入tinymce
image.png
3. 在components文件夹内放入组件包（Tinymce）
image.png
4. 注入组件
在所需注入的组件内引入Tinymce组件
import Tinymce from '@/components/Tinymce'注入组件
components: { Tinymce }data内绑定数据
data:{
return{
content:" ",
}
}
5. 在所在组件内模板中添加
<tinymce :height="300" v-model="content"></tinymce> //引入组件
<div class="editor-content" v-html="content"></div> //显示输入的文字
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官网
