俗话说的好 羊毛出在羊身上,在这个国产软件贫弱的时代,如何从国外软件身上薅羊毛成了中小型企业开发者的必备技能。
- 没有技术实力去自己造好的工具
- 国外好的工具收费贵的要死
最近公司的需求是: 将用户的word文档内容展现在web应用上,在线编辑并导出为word。
看了一下火遍全网的老牌富文本编辑器CKEditor (原FCKEditor) 里面导出word功能居然每月要80刀！？ 这一年大几千的,给公司省点钱,让老板更早开上法拉利他不香吗？
这里给大家提供一个思路: 充分利用CKEditor的功能,还能剩下导出word的钱。
-
进入CKEditor5官网,按照官网的教程将编辑器导入到自己的项目中
-
由于CKEditor5本身自带从office粘贴进编辑器的功能,所以我们可以放心大胆的将word/excel等C内容V到富文本编辑器中(注意只支持微软家的)
-
由于编辑器中的内容使用CKEditor自带的.getData()方法，可以将编辑器内容读取为html文档,所以我们直接将html文档转化为word再导出即可
-
使用htmlDocx和saveAs两个库,读取html并导出为word
npm install html-docx-js file-saver
上完整代码(React框架)
import * as React from 'react';
// 引入CKEditor并使用
import Editor from 'ckeditor5-custom-build/build/ckeditor';
import { CKEditor } from '@ckeditor/ckeditor5-react'
// 引入htmlDocx和saveAs
import htmlDocx from 'html-docx-js/dist/html-docx';
import saveAs from 'file-saver';
export default function TemplateEditer(props) {
const [savedEditData, setSavedEditData] = React.useState(null)
const [editor, setEditor] = React.useState(null) // 保存editor实例
const saveEditorData = () => {// 保存当前模板为html
const data = editor.getData();
setSavedEditData(data)
}
const exportToWord = () => {// 导出为word
var content = savedEditData
var page = '<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>' + content + '</body></html>'
var converted = htmlDocx.asBlob(page);
// 用 FielSaver.js里的保存方法 进行输出
saveAs(converted, 'document.docx');
}
return (
<>
<button onClick={saveEditorData}>保存当前模板内容</button>
<button onClick={exportToWord}>导出为word</button>
<CKEditor
editor={Editor}
data='<p>默认模板</p>'
onReady={editor => { // 初始化时保存editor实例为state
setEditor(editor)
}}
/>
</>
);
}
下面是官方word导出和自实现导出效果对比
原内容
CKEditor官方导出内容
自实现的导出内容
会发现自己实现的既没有水印 排版也比官方的好看一丢丢,
至此 从word到Editor 和从Editor到word都实现了 , 薅的一手好羊毛
