企业官网建设流程全解析

企业为什么做网站,肇庆网站制作,彭山网站建设,steam交易链接怎么用《独立开发者的富文本粘贴攻坚战#xff1a;从Word地狱到云端救赎的技术实录》 ——上海.NET程序员的破局之路 第一章#xff1a;当需求文档变成技术恐怖片 作为独立开发者#xff0c;我独自维护着一个基于Vue2 wangEditor的文档协作平台。某天富文本粘贴攻坚战从Word地狱到云端救赎的技术实录》——上海.NET程序员的破局之路第一章当需求文档变成技术恐怖片作为独立开发者我独自维护着一个基于Vue2 wangEditor的文档协作平台。某天产品经理甩来一份需求“需要支持从Word/Excel/PPT/PDF直接粘贴/导入内容图片自动上传至阿里云OSS且保留原始样式字体/颜色/表格等。后端用ASP.NET Core数据库SQL Server。”我盯着屏幕陷入沉思这哪是需求分明是**“全栈开发者の终极试炼”**。第二章前端战场——wangEditor的粘贴拦截术1. 破解Word的脏HTML陷阱Word粘贴的内容自带、等Office专属标签直接渲染会乱码。我的解决方案// wangEditor配置增强consteditornewWangEditor(#editor)editor.config.pasteFilterStylefalse// 允许基础样式editor.config.pasteIgnoreImgfalse// 不忽略图片// 自定义粘贴处理editor.config.customPaste(editor,html){// 1. 清理Office冗余标签正则暴击letcleanHtmlhtml.replace(//g, ) // 移除Office绘图标签.replace(/\/o:p/g, )// 换行符转换.replace(//g, ) // 移除注释// 2. 提取Base64图片并触发上传returnextractImagesAndUpload(cleanHtml)}2. 图片自动上传从Base64到Blob的蜕变Word图片默认是Base64编码直接传输效率低下。我实现了分步处理asyncfunctionextractImagesAndUpload(html){constparsernewDOMParser()constdocparser.parseFromString(html,text/html)constimagesdoc.querySelectorAll(img[src^data:image])for(letimgofimages){constbase64img.src.split(,)[1]constblobawaitbase64ToBlob(base64)// 自定义转换函数// 调用ASP.NET后端APIconstformDatanewFormData()formData.append(file,blob,word-image.png)fetch(/api/upload,{method:POST,body:formData}).then(resres.json()).then(data{img.srcdata.url// 替换为OSS URL})}returndoc.body.innerHTML}效果用户粘贴Word后图片自动上传至OSS编辑器内显示可访问的URL且保留了原始字体、颜色等样式。第三章后端战场——ASP.NET Core的对象存储攻防战1. 文件接收与OSS上传创建专门的FileUploadController处理图片上传[ApiController][Route(api/[controller])]publicclassUploadController:ControllerBase{privatereadonlyIOSSClient_ossClient;// 阿里云OSS封装接口[HttpPost]publicasyncTaskUpload(IFormFilefile){if(filenull||file.Length0)returnBadRequest();// 生成唯一文件名varextPath.GetExtension(file.FileName);varfileName${Guid.NewGuid()}{ext};// 上传至OSS使用阿里云SDKusingvarstreamfile.OpenReadStream();await_ossClient.PutObjectAsync(your-bucket,$uploads/{fileName},stream);// 返回可访问URLvarurl$https://your-bucket.oss-cn-shanghai.aliyuncs.com/uploads/{fileName};returnOk(new{url});}}2. 文档导入多格式转换方案针对不同文档类型采用不同策略① Word/Excel/PPT → HTML使用LibreOffice通过Docker部署publicasyncTaskConvertOfficeToHtml(stringfilePath,stringfileType){varoutputPathPath.Combine(/tmp,${Guid.NewGuid()}.html);// 调用LibreOffice命令行转换varprocessnewProcess{StartInfonewProcessStartInfo{FileNamesoffice,Arguments$--headless --convert-to html:{fileType}--outdir /tmp{filePath},RedirectStandardOutputtrue,UseShellExecutefalse}};awaitprocess.StartAsync();awaitprocess.WaitForExitAsync();returnFile.ReadAllText(outputPath);}② PDF → HTML使用pdf2htmlEX需单独安装publicasyncTaskConvertPdfToHtml(stringfilePath){varoutputPathPath.Combine(/tmp,${Guid.NewGuid()}.html);varprocessnewProcess{StartInfonewProcessStartInfo{FileNamepdf2htmlEX,Arguments$--zoom 1.3{filePath}{outputPath},RedirectStandardOutputtrue,UseShellExecutefalse}};awaitprocess.StartAsync();awaitprocess.WaitForExitAsync();returnFile.ReadAllText(outputPath);}坑点记录LibreOffice转换Excel时复杂公式可能丢失pdf2htmlEX生成的HTML需要额外CSS重置样式所有转换工具建议通过Docker部署避免环境污染第四章数据库设计——SQL Server的元数据管理为支持文档历史版本设计了以下表结构CREATETABLEDocuments(Id UNIQUEIDENTIFIERPRIMARYKEY,Title NVARCHAR(255),Content NVARCHAR(MAX),-- 存储最终HTMLCreatedAtDATETIMEDEFAULTGETDATE(),UpdatedAtDATETIMEDEFAULTGETDATE());CREATETABLEDocumentImages(Id UNIQUEIDENTIFIERPRIMARYKEY,DocumentId UNIQUEIDENTIFIERFOREIGNKEYREFERENCESDocuments(Id),ImageUrl NVARCHAR(512),OriginalName NVARCHAR(255),SizeINT,UploadTimeDATETIMEDEFAULTGETDATE());第五章同行互助——QQ群里的技术急救在开发过程中加入QQ群223813913后发现北京-张工“推荐用Mammoth.js处理Word比LibreOffice轻量”深圳-李姐“Excel转换后表格线消失试试OpenXML SDK直接解析.xlsx”杭州-王总“阿里云OSS上传建议用预签名URL避免前端直接传密钥”群内资源推荐前端mammoth.jsWord转HTML后端NPOI.NET处理Office文件工具Docker隔离转换环境最终成果从需求到上线的完整闭环现在系统支持✅Word粘贴内容图片自动上传样式保留✅多文档导入Word/Excel/PPT/PDF一键转换✅对象存储图片存阿里云OSS支持CDN加速✅版本管理SQL Server记录文档修改历史技术栈总结前端Vue2 wangEditor粘贴拦截图片上传后端ASP.NET Core文件处理OSS SDK转换工具LibreOffice pdf2htmlEX存储阿里云OSS SQL Server最后呼吁如果你也在攻克富文本编辑器难题欢迎加入QQ群223813913这里没有菜鸟只有即将成为大神的同行完——上海独立开发者·陈工复制插件文件安装jquerynpm install jquery导入组件importEfromwangeditorconst{$,BtnMenu,DropListMenu,PanelMenu,DropList,Panel,Tooltip}Eimport{WordPaster}from../../static/WordPaster/js/wimport{zyCapture}from../../static/zyCapture/zimport{zyOffice}from../../static/zyOffice/js/o初始化组件//zyCapture ButtonclasszyCaptureBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyCapture.setEditor(this.editor).Capture();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportWordBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openDoc();}tryChangeActive(){this.active()}}//zyOffice ButtonclassexportWordBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.exportWord();}tryChangeActive(){this.active()}}//zyOffice ButtonclassimportPdfBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){window.zyOffice.SetEditor(this.editor).api.openPdf();}tryChangeActive(){this.active()}}//WordPaster ButtonclassWordPasterBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).Paste();}tryChangeActive(){this.active()}}//wordImport ButtonclassWordImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWord();}tryChangeActive(){this.active()}}//excelImport ButtonclassExcelImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importExcel();}tryChangeActive(){this.active()}}//ppt paster ButtonclassPPTImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importPPT();}tryChangeActive(){this.active()}}//pdf paster ButtonclassPDFImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor);WordPaster.getInstance().ImportPDF();}tryChangeActive(){this.active()}}//importWordToImg ButtonclassImportWordToImgBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-e-menu>)super($elem,editor)}clickHandler(){WordPaster.getInstance().SetEditor(this.editor).importWordToImg();}tryChangeActive(){this.active()}}//network paster ButtonclassNetImportBtnextendsBtnMenu{constructor(editor){const$elemE.$(div classw-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(){vareditornewE(#editor);WordPaster.getInstance({//上传接口http://www.ncmem.com/doc/view.aspx?idd88b60a2b0204af1ba62fa66288203edPostUrl:http://localhost:8891/upload.aspx,License2:,//为图片地址增加域名http://www.ncmem.com/doc/view.aspx?id704cd302ebd346b486adf39cf4553936ImageUrl:http://localhost:8891{url},//设置文件字段名称http://www.ncmem.com/doc/view.aspx?idc3ad06c2ae31454cb418ceb2b8da7c45FileFieldName:file,//提取图片地址http://www.ncmem.com/doc/view.aspx?id07e3f323d22d4571ad213441ab8530d1ImageMatch:});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?id82170058de824b5c86e2e666e5be319czyOffice.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.length0;editor.txt.eventHooks.pasteEvents.push(function(){WordPaster.getInstance().SetEditor(editor).Paste();e.preventDefault();});editor.create();varedt2newE(#editor2);//挂载粘贴事件edt2.txt.eventHooks.pasteEvents.length0;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格式参考为编辑器添加按钮components:{Editor,Toolbar},data(){return{editor:null,html:dd,toolbarConfig:{insertKeys:{index:0,keys:[zycapture,wordpaster,pptimport,pdfimport,netimg,importword,exportword,importpdf]}},editorConfig:{placeholder:},mode:default// or simple}},整合效果导入Word文档,支持doc,docx导入Excel文档,支持xls,xlsx粘贴Word一键粘贴Word内容自动上传Word中的图片保留文字样式。Word转图片一键导入Word文件并将Word文件转换成图片上传到服务器中。导入PDF一键导入PDF文件并将PDF转换成图片上传到服务器中。导入PPT一键导入PPT文件并将PPT转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例