wangEditor粘贴excel表格数据到前端编辑器

集团 Word 导入产品探索与开发记

我是一名前端开发工程师，在一家业务多元的集团公司总部工作。集团旗下有多个子公司，业务广泛涉及教育、政府、银行等多个行业。近期，集团提出了一个需求：开发一个 Word 导入产品，要能实现 Word 图片自动导入，并且完整保留 Word 文档样式。此外，考虑到集团业务对信创国产化软硬件环境的适配要求，这个产品还需支持在该环境下稳定运行。而且，为了保障后续使用和维护，产品必须完全开源，同时提供 7*24 小时在线技术支持服务。我肩负起了在网上寻找和评估合适产品，并推进开发的重任。

查找开源产品：大海捞针般的探索

我首先在各大知名的开源代码托管平台，如 GitHub、Gitee 上展开搜索。输入“Word 导入”“Word 图片处理”“信创兼容”等关键词，期望能快速找到符合需求的项目。然而，结果并不尽如人意。

很多项目虽然能处理 Word 文档，但对图片自动导入的支持并不完善，要么需要手动干预，要么在导入过程中图片会出现丢失或错位的情况。还有一些项目虽然声称支持信创环境，但缺乏详细的测试报告和实际案例，让人不敢轻易采用。

在不断筛选和尝试中，我发现了一个名为“DocxJS - Pro”的项目。它基于 JavaScript 开发，对 Word 文档的解析能力较强，在文档样式保留方面表现出色。而且，项目文档中提到对部分信创环境有适配计划，虽然目前还不完善，但看起来有一定的潜力。不过，关于 7*24 小时在线技术支持服务，项目官方并没有明确提及，这让我有些担忧。

我继续深入挖掘，又找到了“OpenDocxImporter”。这个项目完全开源，代码结构清晰，对 Word 图片的自动导入有专门的优化处理。在信创环境适配方面，它与一些主流的国产操作系统和办公软件进行了兼容性测试，并提供了相应的适配方案。更让我惊喜的是，项目社区非常活跃，开发者们经常在论坛上交流问题，虽然不是官方 7*24 小时在线支持，但响应速度较快，能及时解决遇到的技术难题。经过综合评估，我决定将“OpenDocxImporter”作为重点考察对象，进一步开展开发工作。

开发过程：挑战与突破并存

环境搭建与适配

确定了产品方向后，我开始了开发环境的搭建工作。由于要支持信创国产化软硬件环境，我选择了国产的操作系统和数据库。在安装和配置过程中，遇到了不少兼容性问题。例如，某些开发工具在国产操作系统上无法正常运行，需要寻找替代方案或进行二次开发。经过一番努力，我成功搭建起了符合要求的开发环境，并对“OpenDocxImporter”进行了初步的适配调整，确保它能在信创环境下正常编译和运行。

功能优化与完善

在功能开发方面，虽然“OpenDocxImporter”对 Word 图片自动导入有基础支持，但在实际测试中发现，对于一些复杂的图片格式和排版，导入效果并不理想。我深入研究 Word 文档的二进制结构，结合项目的代码逻辑，对图片处理模块进行了优化。通过增加图片格式识别和转换功能，以及优化图片在目标文档中的定位算法，大大提高了图片导入的准确性和稳定性。

同时，为了更好地保留 Word 文档样式，我对项目的样式解析和渲染部分进行了细致的调整。与集团内部不同行业的业务人员沟通，了解他们对文档样式的具体需求，针对性地优化了字体、字号、颜色、段落格式等样式的保留效果。经过多次测试和迭代，最终实现了 Word 文档样式的高度还原。

测试与优化

在开发过程中，测试是至关重要的环节。我制定了详细的测试计划，包括功能测试、性能测试、兼容性测试等多个方面。在功能测试中，使用了大量不同行业、不同格式的 Word 文档进行导入测试，确保产品的各项功能都能正常工作。性能测试方面，通过模拟大量并发导入操作，评估产品在高压情况下的响应速度和稳定性，对发现的性能瓶颈进行了优化。

兼容性测试是本次开发的重点和难点。除了常见的国产操作系统和办公软件，还考虑了不同版本的兼容性。我与集团内部的信创团队紧密合作，获取了多种信创软硬件环境进行全面测试。针对测试中发现的问题，及时调整代码，确保产品能在各种信创环境下稳定运行。

成果与展望

经过几个月的努力，我成功完成了 Word 导入产品的开发工作。该产品完全开源，基于“OpenDocxImporter”进行了深度定制和优化，实现了 Word 图片自动导入和样式完美保留的功能，并且全面支持信创国产化软硬件环境。在项目社区的支持下，虽然不是官方的 7*24 小时在线技术支持，但通过活跃的社区交流，也能及时解决用户遇到的问题。

目前，该产品已经在集团内部进行了试点应用，得到了业务部门的一致好评。未来，我将继续关注信创技术的发展动态，及时对产品进行升级和优化，确保它能够满足集团不断变化的业务需求。同时，我也希望能与更多的开发者交流合作，共同推动开源项目的发展，为信创产业贡献自己的一份力量。

复制插件文件

安装jquery

npm install jquery

导入组件

importEfrom'wangeditor'const{$,BtnMenu,DropListMenu,PanelMenu,DropList,Panel,Tooltip}=Eimport{WordPaster}from'../../static/WordPaster/js/w'import{zyCapture}from'../../static/zyCapture/z'import{zyOffice}from'../../static/zyOffice/js/o'

初始化组件

//zyCapture ButtonclasszyCaptureBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyCapture.setEditor(this.editor).Capture();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportWordBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openDoc();}tryChangeActive(){this.active()}}//zyOffice ButtonclassexportWordBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.exportWord();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportPdfBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openPdf();}tryChangeActive(){this.active()}}//WordPaster ButtonclassWordPasterBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).Paste();}tryChangeActive(){this.active()}}//wordImport ButtonclassWordImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWord();}tryChangeActive(){this.active()}}//excelImport ButtonclassExcelImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importExcel();}tryChangeActive(){this.active()}}//ppt paster ButtonclassPPTImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importPPT();}tryChangeActive(){this.active()}}//pdf paster ButtonclassPDFImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().ImportPDF();}tryChangeActive(){this.active()}}//importWordToImg ButtonclassImportWordToImgBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWordToImg();}tryChangeActive(){this.active()}}//network paster ButtonclassNetImportBtnextendsBtnMenu{constructor(editor){const$elem=E.$(`<div class="w-e-menu">`)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().UploadNetImg();}tryChangeActive(){this.active()}}exportdefault{name:'HelloWorld',data(){return{msg:'Welcome to Your Vue.js App'}},mounted(){vareditor=newE('#editor');WordPaster.getInstance({//上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203edPostUrl:"http://localhost:8891/upload.aspx",License2:"",//为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936ImageUrl:"http://localhost:8891{url}",//设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:"file",//提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1ImageMatch:''});zyCapture.getInstance({config:{PostUrl:"http://localhost:8891/upload.aspx",License2:'',FileFieldName:"file",Fields:{uname:"test"},ImageUrl:'http://localhost:8891{url}'}})// zyoffice，// 使用前请在服务端部署zyoffice，// http://www.ncmem.com/doc/view.aspx?id=82170058de824b5c86e2e666e5be319czyOffice.getInstance({word:'http://localhost:13710/zyoffice/word/convert',wordExport:'http://localhost:13710/zyoffice/word/export',pdf:'http://localhost:13710/zyoffice/pdf/upload'})// 注册菜单E.registerMenu("zyCaptureBtn",zyCaptureBtn)E.registerMenu("WordPasterBtn",WordPasterBtn)E.registerMenu("ImportWordToImgBtn",ImportWordToImgBtn)E.registerMenu("NetImportBtn",NetImportBtn)E.registerMenu("WordImportBtn",WordImportBtn)E.registerMenu("ExcelImportBtn",ExcelImportBtn)E.registerMenu("PPTImportBtn",PPTImportBtn)E.registerMenu("PDFImportBtn",PDFImportBtn)E.registerMenu("importWordBtn",importWordBtn)E.registerMenu("exportWordBtn",exportWordBtn)E.registerMenu("importPdfBtn",importPdfBtn)//挂载粘贴事件editor.txt.eventHooks.pasteEvents.length=0;editor.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(editor).Paste();e.preventDefault();});editor.create();varedt2=newE('#editor2');//挂载粘贴事件edt2.txt.eventHooks.pasteEvents.length=0;edt2.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(edt2).Paste();e.preventDefault();return;});edt2.create();}}h1,h2{font-weight:normal;}ul{list-style-type:none;padding:0;}li{display:inline-block;margin:010px;}a{color:#42b983;}

测试前请配置图片上传接口并测试成功
接口测试
接口返回JSON格式参考

为编辑器添加按钮

整合效果

导入Word文档,支持doc,docx

导入Excel文档,支持xls,xlsx

粘贴Word

一键粘贴Word内容，自动上传Word中的图片，保留文字样式。

Word转图片

一键导入Word文件，并将Word文件转换成图片上传到服务器中。

导入PDF

一键导入PDF文件，并将PDF转换成图片上传到服务器中。

导入PPT

一键导入PPT文件，并将PPT转换成图片上传到服务器中。

上传网络图片

一键自动上传网络图片，自动下载远程服务器图片，自动上传远程服务器图片

下载示例

点击下载完整示例