2023年6月21日发(作者：)

Vue中使⽤froala富⽂本编辑器制作打印模板参考 知识开发的⼀个功能，制作⼀个打印模板的管理模块，如下(就是保存froala编辑后的html⽂本，其中包括Vue的Template，这样我们可以利⽤Vue的模板的优势来动态绑定⼀些数据源进⾏HTML的打印,基本上跟过去⽔晶报表做⼀个模板再绑定数据源的⽅法异曲同⼯) 在 ⾥引⽤ froala 组件// Import and use Vue Froala VueFroala from 'vue-froala-wysiwyg'// 引⼊ Froala Editor js e('froala-editor/js/froala_')// 引⼊中⽂语⾔包require('froala-editor/js/languages/zh_cn')// 引⼊ Froala Editor css e('froala-editor/css/froala_')require('font-awesome/css/')require('froala-editor/css/froala_')// 批量导⼊ froala-editor 插件⽂件function importAll (r) { ().forEach(r)}importAll(t('froala-editor/js/plugins/', false, /.js$/))importAll(t('froala-editor/css/plugins/', false, /.css$/))(VueFroala)以上基本是引⽤了所有的插件，不然⼯具栏会有很多的按钮不出来然后把 froala ⽂本编辑器封装成⼀个Vue组件，只暴露我们想要的功能具体的⽤法还要参详⼀下 froala 官⽅⽂档，这⾥不细表了后端设计⼀张数据库表⽤来保存 html ⽂本下⾯使⽤刚刚上⾯封装好的组件对html模板进⾏保存和更新 绑定Vue的数据源，打印预览效果如下

2023年6月21日发(作者：)

Vue中使⽤froala富⽂本编辑器制作打印模板参考 知识开发的⼀个功能，制作⼀个打印模板的管理模块，如下(就是保存froala编辑后的html⽂本，其中包括Vue的Template，这样我们可以利⽤Vue的模板的优势来动态绑定⼀些数据源进⾏HTML的打印,基本上跟过去⽔晶报表做⼀个模板再绑定数据源的⽅法异曲同⼯) 在 ⾥引⽤ froala 组件// Import and use Vue Froala VueFroala from 'vue-froala-wysiwyg'// 引⼊ Froala Editor js e('froala-editor/js/froala_')// 引⼊中⽂语⾔包require('froala-editor/js/languages/zh_cn')// 引⼊ Froala Editor css e('froala-editor/css/froala_')require('font-awesome/css/')require('froala-editor/css/froala_')// 批量导⼊ froala-editor 插件⽂件function importAll (r) { ().forEach(r)}importAll(t('froala-editor/js/plugins/', false, /.js$/))importAll(t('froala-editor/css/plugins/', false, /.css$/))(VueFroala)以上基本是引⽤了所有的插件，不然⼯具栏会有很多的按钮不出来然后把 froala ⽂本编辑器封装成⼀个Vue组件，只暴露我们想要的功能具体的⽤法还要参详⼀下 froala 官⽅⽂档，这⾥不细表了后端设计⼀张数据库表⽤来保存 html ⽂本下⾯使⽤刚刚上⾯封装好的组件对html模板进⾏保存和更新 绑定Vue的数据源，打印预览效果如下