常见文件附件预览逻辑1. 页面渲染2. 文件预览流程3. 这个方案的特点4. 小结这篇只讲文件附件的预览链路。页面模板负责把点击入口绑好真正的预览逻辑在 JS 里完成。1. 页面渲染view a:for{{item.value}} a:for-itemfile >2. 文件预览流程文件点击后会走openLink流程可以概括成三步先转存再校验最后预览。openLink(e){const{url,name}e.target.dataset;if(!url)return;dd.showLoading({content:文件转存中...});dd.saveFileToDingTalk({url,name:name||,success:(res){dd.hideLoading();const[fileInfo{}]res.data||[];const{spaceId,fileId,fileName,fileSize,fileType}fileInfo;if(!spaceId||!fileId)returndd.showToast({type:fail,content:文件转存失败});dd.previewFileInDingTalk({corpId:dd.corpId,spaceId,fileId,fileName:fileName||name||,fileSize,fileType,fail(err){dd.showToast({type:fail,content:(errerr.errorMessage)||文件预览失败});},});},fail(err){dd.hideLoading();dd.showToast({type:fail,content:(errerr.errorMessage)||文件转存失败});},});}这里的关键点是文件不是直接拿原始 URL 打开而是先调用dd.saveFileToDingTalk转存到平台侧再用返回的spaceId、fileId去预览。这样做的好处是兼容平台内部的文件预览能力也能统一兜底失败提示。3. 这个方案的特点模板层只负责展示和绑定事件不写复杂逻辑。文件先转存再预览兼容平台文件能力。每一步都有兜底提示避免用户看到空白或无响应。4. 小结这套file附件预览其实就是把“展示”、“转存”、“预览”拆开处理展示层决定用户看到什么转存层解决平台兼容问题预览层负责最终交互体验