[特殊字符] 手把手教你实现前端邮件预览功能 _

组件核心功能一览✅ 支持上传.eml格式邮件文件✅ 限制文件类型、大小、数量✅ 预览邮件内容含发件人、收件人、抄送、正文、图片✅ 支持附件下载✅ 响应式栅格布局适配移动端 技术架构与实现细节1. 文件上传与格式校验组件使用van-uploader实现文件选择并在beforeRead方法中进行格式和大小校验1234567constbeforeRead (file) {if(!props.accept.includes(file.type)) {createToast.fail({ getContainer:body, message:文件格式错误})returnfalse}// 上传逻辑...}2. 邮件内容解析从二进制到可读 HTML这是最核心的部分组件通过FileReader读取.eml文件内容并使用emailjs-mime-codec和eml-format库进行解码1234567reader.onload async (e) {letemlContent e.target.result;emlContent Codec.quotedPrintableDecode(emlContent,UTF-8);emlFormat.read(emlContent, (err, data) {// 解析出邮件主题、发件人、收件人、正文等});}3. 邮件主题解码处理 MIME 编码邮件主题常常是 MIME 编码的例如1?UTF-8?B?5paw5bm56Zm15aG?组件使用Codec.mimeWordDecode进行解码确保中文等非 ASCII 字符正确显示。4. 内嵌图片处理Uint8Array → Base64邮件中的图片通常以cid:引用附件中以Uint8Array格式存储。组件将其转换为 Base64 并替换到 HTML 中12constbase64String uint8ArrayToBase64(item.data);_html _html.replaceAll(cid:${cid}, data:image/${item.name.split(.).at(-1)};base64,${base64String});5. 弹窗预览与下载使用 Vant 的Dialog组件展示邮件内容并支持一键下载原文件12345678910Dialog({message: concatHeader(data, title),messageAlign:left,className:eml-dialog,showCancelButton:true,confirmButtonText:下载}).then(async() {await nativeApi.downloadFile(encodeURI(item))createToast.success({ getContainer:body, message:保存成功})}) 界面与交互设计使用van-grid实现响应式文件列表每个文件项显示为附件图标点击可预览或下载右上角删除按钮支持编辑模式下移除文件提示信息友好限制条件明确 可扩展性与优化建议类型推断可增加一个函数根据file.type推断文件后缀名增强兼容性错误处理增加更多读取失败或格式错误的 fallback 逻辑性能优化大文件分片读取避免阻塞 UI 总结这个组件不仅实现了邮件上传与预览的完整链路还展示了如何在浏览器中处理复杂的 MIME 格式邮件、解码主题、内联图片等高级功能。如果你正在开发一个需要邮件附件的管理系统、工单系统或邮件审计工具这个组件绝对是一个值得借鉴和复用的技术方案如果这篇文章对你有帮助欢迎点赞、收藏、转发我们也欢迎你在评论区留言分享你在邮件解析或文件上传方面的实战经验 源码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210templatedivvan-grid :borderfalse:column-num4:gutter10classemlBox!-- 上传更多图片 --van-grid-item v-for(item, index) in list:keyindexdivclasspicBoxdiv click.stoppreview(item)svg-iconicon-classnew-fujianiconnew-fujianclass-namefile-svg-icon//divvan-iconclick.stoplist.splice(index,1)classcloseIconnameclearv-ifisEdit//div/van-grid-itemvan-grid-itemclassuploadGridv-iflist.length maxCount isEditvan-uploader:max-countmaxCount:max-sizemaxSize*1024*1024:acceptacceptclassfile-upload__uploader:preview-imagefalseupload-iconplus:before-readbeforeRead//van-grid-item/van-griddivclasstipv-ifisEdit只能上传{{ acceptFile }}文件不超过{{ maxSize }}M/div/div/templatescript setupimport { useVModel }fromvueuse/coreimport {ref, defineProps, defineEmits }fromvueimport inspectionApifrom/service/apis/modules/inspectionApi.jsimport { useToast }from/hooksimport *asemlFormatfromeml-format;import *asCodecfromemailjs-mime-codec;import { Dialog }fromvant;import nativeApifrom/tools/native.jsconstprops defineProps({maxCount: {type: [Number, String],defaule: 5},maxSize: {type: [Number, String],defaule: 20},filelList: {type: Array,default: () []},accept: {type: String,default:message/rfc822},acceptFile: {type: String,default:eml},isEdit: {type: Boolean,default:true}})constemit defineEmits([update:filelList])constlist useVModel(props,filelList, emit, {defaultValue: []})const{ createToast } useToast()constbeforeRead (file) {if(!props.accept.includes(file.type)) {createToast.fail({ getContainer:body, message:文件格式错误})returnfalse}letformData newFormData();formData.append(file, file);inspectionApi.uploadVideoAPI(formData).then(res {list.value.push(res);})returntrue}function removeGarbledChars(html) {// 删除最后一个div闭合标签后的多余字符letcontent html;letlastDivIndex html.lastIndexOf(/div);if(lastDivIndex ! -1) {content content.substring(0, lastDivIndex 6);}returncontent}// 拼接邮件内容的发件人/收件人/抄送/附件等信息function concatHeader (file, title) {const{to,from, cc, attachments, html} file;letheader divb主题/b${title}/div;header divb发件人/b${from.name} ${from.email}/div;lettoList to.map(item ${item.name} ${item.email}).join(; );header divb收件人/b${toList}/div;letccList cc.map(item ${item.name} ${item.email}).join(; );header divb抄送/b${ccList}/div;header divb邮件内容/b/div;header removeGarbledChars(html);returnheader;}constpreview async (item) {// 邮件预览功能暂时取消直接下载文件附件回显问题无法解决if(item.split(.).at(-1).toLowerCase() eml) {fetch(encodeURI(item)).then(res res.blob()).then((data) {constblob newBlob([data]);constreader newFileReader();reader.onload async (e) {letemlContent e.target.result;emlContent Codec.quotedPrintableDecode(emlContent);emlFormat.read(emlContent, (err, data) {lettitle if(data.subject) {title Codec.mimeWorsdDecode(data.subject);}Dialog({message: concatHeader(data, title),messageAlign:left,className:eml-dialog,showCancelButton:true,confirmButtonText:下载})})}reader.readAsText(blob);})}}// 文件对象中的type和后缀名不一定一致所以需要判断写一个函数根据文件的type返回文件后缀名/scriptstyle langless.eml-dialog {.van-dialog__message {display: flex;flex-direction: column;}.van-dialog__message div {width: fit-content;}}/stylestyle langlessscoped.tip {color: #999999;margin-bottom: 12px;padding-left: 16px !important;}.closeIcon {position: absolute;right: 0px;top: 10px;font-size: 20px;}.file-upload__uploader {width: 100%;::v-deep {.van-uploader__upload {margin: 0;}.van-uploader__upload-icon {display: inline-flex;align-items: center;justify-content: center;color: #999999;font-weight: bold;width: 100%;height: 80px;background: #fdfdfd;border-radius: 6px;border: 1px solid #e5e5e5;overflow: hidden;font-size: 12px;}}}.emlBox {padding-left: 16px !important;padding-right: 6px;.picBox {width: 100%;}.uploadGrid {padding-right: 0 !important;}::v-deep {.van-grid-item__content {padding: 10px 0;justify-content: start;position: relative;}}}.file-svg-icon {width: 100%;height: 80px;}/style如果对您有所帮助欢迎您点个关注我会定时更新技术文档大家一起讨论学习一起进步。