企业官网建设流程全解析

廊坊做网站的企业哪家好,网页游戏魔域永恒,高新区建设局网站,wordpress软件网站主题《苏州程序员の暑假奇遇记#xff1a;Word图片转存大作战》 日期#xff1a;2023年7月15日 星期五 苏州 暴雨转晴#xff08;适合宅家敲代码#xff09; 第一章#xff1a;需求诞生——从“懒癌晚期”到“技术狂魔” “客户爸爸说#xff0c;他们每天要从Word里抠100张…《苏州程序员の暑假奇遇记Word图片转存大作战》日期2023年7月15日 星期五 苏州 暴雨转晴适合宅家敲代码第一章需求诞生——从“懒癌晚期”到“技术狂魔”“客户爸爸说他们每天要从Word里抠100张图片存到服务器手动右键另存为FTP上传手指都快磨出老茧了”我叼着冰棍瘫在电竞椅上看着屏幕里客户发来的“血泪控诉”突然觉得自己的暑假不该只用来肝《原神》。“这需求不就是‘Word图片一键转存自动上传服务器’吗简单”Flag立得飞起第二章组件狩猎——在GitHub的海洋里“捞针”打开GitHub输入关键词“word image extract”结果如下mammoth.js能转Word为HTML但图片是base64编码的上传得自己处理“这不就是让我手动搓轮子吗”docx-preview能预览Word但图片提取“抱歉本库只负责看不负责摸。”officegen生成Word的神器但反向操作“反向抽烟不会”绝望之际突然想到——“既然Word能转HTML那图片肯定是标签啊直接抓src里的base64转Blob上传不就行了”拍桌“我真是个天才现在只需要找个能解析Word的库”第三章前端攻坚——Vue2 wangEditor5的“梦幻联动”Step 1让wangEditor5支持Word粘贴wangEditor5默认不支持直接粘贴Word内容但官方文档说可以“自定义扩展”。代码片段// src/utils/editorConfig.jsimport{Editor}fromwangeditor5import{Boot}fromwangeditor5/core// 自定义粘贴过滤器Boot.registerModule({name:pasteFilter,editor:Editor,config:(editor){editor.on(paste,(data){if(data.typetext/html){consthtmldata.data// 简单处理提取所有标签实际需更复杂的DOM解析constimgTagshtml.match(/]src([^])/g)||[]console.log(提取到的图片,imgTags)}})}})测试结果复制Word图片→粘贴到编辑器→控制台输出标签但src是data:image/png;base64,...成功一半Step 2Base64转Blob并上传代码片段// src/utils/imageUploader.jsexportasyncfunctionuploadWordImages(base64List){constformDatanewFormData()base64List.forEach((base64,index){// Base64转BlobconstblobdataURLtoBlob(base64)formData.append(images[],blob,word_image_${index}.png)})// 调用阿里云OSS直传后端签名的URLconstresponseawaitfetch(https://your-server.com/api/upload-sign,{method:POST,body:formData})returnresponse.json()}functiondataURLtoBlob(dataurl){constarrdataurl.split(,)constmimearr[0].match(/:(.*?);/)[1]constbstratob(arr[1])letnbstr.lengthconstu8arrnewUint8Array(n)while(n--){u8arr[n]bstr.charCodeAt(n)}returnnewBlob([u8arr],{type:mime})}测试结果图片成功上传到阿里云OSS但文件名是乱码“一定是客户爸爸的Word里藏了外星文字”第四章后端收尾——PHP的“优雅”处理Step 1生成阿里云OSS上传签名代码片段// api/upload-sign.phpdate(Y-m-d\TH:i:s\Z,time()3600),conditions[[bucket$bucket],[starts-with,$key,word-images/]// 限定上传目录]];$base64Policybase64_encode(json_encode($policy));$signaturebase64_encode(hash_hmac(sha1,$base64Policy,$accessKeySecret,true));echojson_encode([accessId$accessKeyId,policy$base64Policy,signature$signature,hosthttps://{$bucket}.{$endpoint},expiretime()3600]);}catch(OssException$e){http_response_code(500);echojson_encode([error$e-getMessage()]);}?测试结果前端拿到签名后直接通过OSS的POST Policy上传PHP后端只需“躺平”接收结果“PHP果然是世界上最好的语言”第五章群友助力——QQ群里的“神仙打架”在QQ群223813913里喊了一嗓子“求救Word图片转存前端怎么提取所有图片”瞬间炸出一堆大佬上海-张工“别用正则匹配HTML用DOMParser解析更靠谱”constparsernewDOMParser()constdocparser.parseFromString(html,text/html)constimagesArray.from(doc.querySelectorAll(img))深圳-李姐“阿里云OSS直传可以配置回调上传成功后自动通知你的后端”杭州-小学生实际是阿里云架构师“建议用docx.js直接解析Word文件比转HTML更精准”最终方案前端wangEditor5DOMParser提取图片后端PHP生成OSS签名 回调处理第六章大功告成——客户爸爸的“真香”现场测试视频发给客户后回复如下“这速度这体验比我们手动操作快10倍明天请你喝星巴克”内心OS“星巴克不如折现给我买机械键盘”今日总结技术栈Vue2 wangEditor5 PHP 阿里云OSS关键点Word转HTML后提取图片Base64转Blob上传OSS直传减少服务器压力群友价值“一个人可以走得快但一群人可以走得远还能一起摸鱼”明日计划优化图片压缩前端用browser-image-compression写一篇技术博客《从Word到OSS暑假程序员の自救指南》签名苏州·秃头但快乐的程序员2023年7月15日P.S.如果你们也想加入“Word图片转存”豪华套餐欢迎来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转换成图片上传到服务器中。上传网络图片一键自动上传网络图片自动下载远程服务器图片自动上传远程服务器图片下载示例点击下载完整示例