網(wǎng)站建設(shè)宣傳預(yù)算,書籍網(wǎng)站開發(fā)多少錢,深圳網(wǎng)站域名,公司網(wǎng)站怎么規(guī)范管理的金融業(yè)務(wù)系統(tǒng)文檔導(dǎo)入功能開發(fā)手記 第一章#xff1a;需求確認(rèn)與技術(shù)焦慮 2023年6月5日#xff0c;作為前端組的核心成員#xff0c;我接到了產(chǎn)品經(jīng)理緊急拋來的需求#xff1a;在現(xiàn)有金融業(yè)務(wù)系統(tǒng)中新增Word/PDF導(dǎo)入功能#xff0c;重點要求完整保留文檔中的圖表樣式和…金融業(yè)務(wù)系統(tǒng)文檔導(dǎo)入功能開發(fā)手記第一章需求確認(rèn)與技術(shù)焦慮2023年6月5日作為前端組的核心成員我接到了產(chǎn)品經(jīng)理緊急拋來的需求在現(xiàn)有金融業(yè)務(wù)系統(tǒng)中新增Word/PDF導(dǎo)入功能重點要求完整保留文檔中的圖表樣式和金融公式。當(dāng)前系統(tǒng)基于Vue2-CLI構(gòu)建使用TinyMCE4作為新聞編輯器后端是SpringBootMySQL的經(jīng)典組合?！斑@個需求最棘手的是樣式保真度”我在需求評審會上指出“特別是那些帶編號的金融報表和LaTeX公式轉(zhuǎn)換”。技術(shù)總監(jiān)推了推眼鏡“給你們兩周時間調(diào)研開源方案必須兼顧安全性和性能——畢竟涉及客戶財報數(shù)據(jù)”。第二章開源方案的絕望探索6月7日TinyMCE插件深淵測試了tinymce-wordimport插件發(fā)現(xiàn)它只能處理純文本連表格邊框都丟失了發(fā)現(xiàn)powerpaste商業(yè)插件支持樣式保留但每年$1200的授權(quán)費讓財務(wù)總監(jiān)直接否決在GitHub找到docx-preview項目集成后發(fā)現(xiàn)它生成的HTML結(jié)構(gòu)與TinyMCE不兼容6月10日后端解析的噩夢用Apache POI解析.docx時發(fā)現(xiàn)金融圖表中的漸變色全部變成黑白嘗試用Aspose.Words的試用版效果驚艷但3999美元的定價令人窒息測試docx4j時XML解析錯誤讓整個測試環(huán)境崩潰了三次6月12日PDF的致命陷阱pdf.js渲染的文檔在編輯器里出現(xiàn)嚴(yán)重錯位使用pdf2htmlEX轉(zhuǎn)換后發(fā)現(xiàn)生成的HTML包含大量冗余標(biāo)簽金融客戶常用的PDF表單控件根本無法識別第三章破局之路——混合架構(gòu)設(shè)計6月15日靈感閃現(xiàn)的凌晨在第三次失敗后我盯著TinyMCE的API文檔突然意識到或許可以分層處理前端預(yù)處理層使用mammoth.js提取Word文檔的干凈HTML保留基礎(chǔ)樣式通過自定義Web Worker解析圖片分片上傳到七牛云后端增強層SpringBoot接收HTML后用Jsoup清理危險標(biāo)簽對殘留的復(fù)雜樣式進行二次渲染轉(zhuǎn)換編輯器適配層擴展TinyMCE的paste插件攔截特殊節(jié)點處理實現(xiàn)金融圖表專用樣式映射表第四章代碼攻堅實錄6月18日前端核心代碼// 自定義文檔解析器classDocxParser{constructor(file){this.filefile;this.imageMapnewMap();}asyncparse(){constarrayBufferawaitthis.file.arrayBuffer();constresultawaitmammoth.extractRawText({arrayBuffer});// 處理圖片關(guān)鍵代碼result.messages.forEach(msg{if(msg.typewarningmsg.message.includes(image)){constimageIdmsg.message.match(/image-(d)/)[1];this.extractImage(arrayBuffer,imageId);}});returnthis.enhanceHtml(result.value);}asyncextractImage(buffer,id){// 實現(xiàn)分片上傳邏輯...}enhanceHtml(html){// 金融樣式增強轉(zhuǎn)換returnhtml.replace(/后端異步處理Async(taskExecutor)publicCompletableFutureprocessLargeDocument(MultipartFilefile){// 使用線程池處理大文件returnCompletableFuture.runAsync(()-{// 解析邏輯...});}6月25日安全加固上傳接口增加JWT驗證// 前端上傳攔截器axios.interceptors.request.use(config{if(config.url.includes(/upload)){config.headers[Authorization]Bearer${store.state.token};}returnconfig;});數(shù)據(jù)庫存儲設(shè)計CREATETABLEdocument_assets(idBIGINTAUTO_INCREMENTPRIMARYKEY,file_hashCHAR(64)NOTNULLCOMMENTSHA-256校驗,content_typeVARCHAR(32)NOTNULL,processed_htmlTEXT,statusTINYINTDEFAULT0COMMENT0:待處理 1:成功 2:失敗,INDEXidx_hash(file_hash));第六章血淚教訓(xùn)與突破6月28日崩潰時刻在測試環(huán)境部署時發(fā)現(xiàn)大文件上傳導(dǎo)致Nginx連接超時。緊急調(diào)整前端實現(xiàn)分片上傳每片5MB后端改用WebSocket接收數(shù)據(jù)流增加進度條顯示關(guān)鍵用戶體驗7月2日終極勝利經(jīng)過18次迭代終于實現(xiàn)98%的Word樣式準(zhǔn)確還原平均處理速度提升300%通過等保三級安全認(rèn)證在驗收會上當(dāng)看到復(fù)雜的金融報表完美呈現(xiàn)在編輯器中時測試組長驚嘆“這比原生Word的兼容性還好”第七章技術(shù)債務(wù)與展望遺留問題舊版.doc文件仍需人工處理某些特殊字體轉(zhuǎn)換存在偏差后續(xù)計劃2023年Q4接入OCR識別實現(xiàn)圖片表格智能提取探索WebAssembly加速文檔解析建立金融文檔樣式標(biāo)準(zhǔn)庫這次開發(fā)讓我深刻體會到在金融行業(yè)技術(shù)方案的選擇永遠(yuǎn)是安全、合規(guī)與用戶體驗的三重博弈。當(dāng)看到系統(tǒng)成功處理某銀行上億規(guī)模的財報文檔時所有的熬夜和調(diào)試都變得值得。復(fù)制插件安裝jquerynpm install jquery在組件中引入// 引入tinymce-vueimportEditorfromtinymce/tinymce-vueimport{WordPaster}from../../static/WordPaster/js/wimport{zyOffice}from../../static/zyOffice/js/oimport{zyCapture}from../../static/zyCapture/z添加工具欄//添加導(dǎo)入excel工具欄按鈕(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importExcel()}varregister$1function(editor){editor.ui.registry.addButton(excelimport,{text:,tooltip:導(dǎo)入Excel文檔,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(excelimport,{text:,tooltip:導(dǎo)入Excel文檔,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(excelimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加word轉(zhuǎn)圖片工具欄按鈕(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importWordToImg()}varregister$1function(editor){editor.ui.registry.addButton(importwordtoimg,{text:,tooltip:Word轉(zhuǎn)圖片,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(importwordtoimg,{text:,tooltip:Word轉(zhuǎn)圖片,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(importwordtoimg,function(editor){Buttons.register(editor);});}Plugin();}());//添加粘貼網(wǎng)絡(luò)圖片工具欄按鈕(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().UploadNetImg()}varregister$1function(editor){editor.ui.registry.addButton(netpaster,{text:,tooltip:網(wǎng)絡(luò)圖片一鍵上傳,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(netpaster,{text:,tooltip:網(wǎng)絡(luò)圖片一鍵上傳,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(netpaster,function(editor){Buttons.register(editor);});}Plugin();}());//添加導(dǎo)入PDF按鈕(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().ImportPDF()}varregister$1function(editor){editor.ui.registry.addButton(pdfimport,{text:,tooltip:導(dǎo)入pdf文檔,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(pdfimport,{text:,tooltip:導(dǎo)入pdf文檔,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(pdfimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加導(dǎo)入PPT按鈕(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor);WordPaster.getInstance().importPPT()}varregister$1function(editor){editor.ui.registry.addButton(pptimport,{text:,tooltip:導(dǎo)入PowerPoint文檔,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(pptimport,{text:,tooltip:導(dǎo)入PowerPoint文檔,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(pptimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加導(dǎo)入WORD按鈕(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);functionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).importWord()}varregister$1function(editor){editor.ui.registry.addButton(wordimport,{text:,tooltip:導(dǎo)入Word文檔,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(wordimport,{text:,tooltip:導(dǎo)入Word文檔,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(wordimport,function(editor){Buttons.register(editor);});}Plugin();}());//添加WORD粘貼按鈕(function(){use strict;varglobaltinymce.util.Tools.resolve(tinymce.PluginManager);varicohttp://localhost:8080/static/WordPaster/plugin/word.pngfunctionselectLocalImages(editor){WordPaster.getInstance().SetEditor(editor).PasteManual()}varregister$1function(editor){editor.ui.registry.addButton(wordpaster,{text:,tooltip:Word一鍵粘貼,onAction:function(){selectLocalImages(editor)}});editor.ui.registry.addMenuItem(wordpaster,{text:,tooltip:Word一鍵粘貼,onAction:function(){selectLocalImages(editor)}});};varButtons{register:register$1};functionPlugin(){global.add(wordpaster,function(editor){Buttons.register(editor);});}Plugin();}());在線代碼添加插件// 插件plugins:{type:[String,Array],// default: advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualcharsdefault:autoresize code autolink autosave image imagetools paste preview table powertables},點擊查看在線代碼初始化組件// 初始化WordPaster.getInstance({// 上傳接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:http://localhost:8891/upload.aspx,// 為圖片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:http://localhost:8891{url},// 設(shè)置文件字段名稱http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,// 提取圖片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:})在頁面中引入組件功能演示編輯器在編輯器中增加功能按鈕導(dǎo)入Word文檔,支持doc,docx導(dǎo)入Excel文檔,支持xls,xlsx粘貼Word一鍵粘貼Word內(nèi)容自動上傳Word中的圖片保留文字樣式。Word轉(zhuǎn)圖片一鍵導(dǎo)入Word文件并將Word文件轉(zhuǎn)換成圖片上傳到服務(wù)器中。導(dǎo)入PDF一鍵導(dǎo)入PDF文件并將PDF轉(zhuǎn)換成圖片上傳到服務(wù)器中。導(dǎo)入PPT一鍵導(dǎo)入PPT文件并將PPT轉(zhuǎn)換成圖片上傳到服務(wù)器中。上傳網(wǎng)絡(luò)圖片一鍵自動上傳網(wǎng)絡(luò)圖片。下載示例點擊下載完整示例