我们有一个用 Angular4+ 编写的网络电子邮件客户端。 我们从 Exchange Web 服务加载电子邮件。
传入的邮件经过清理,然后呈现为 iframe 的源。 即使图像也可以正常工作,除非它们是像这样嵌入的
<img width="486" height="572" id="Grafik_x0020_2" src="cid:image002.jpg@01D39103.BD805530">
有没有办法在渲染电子邮件时显示图像? 我们也可以下载附件。
谢谢并致以最诚挚的问候 克里斯托夫
最佳答案
因为我们已经下载了附件,所以我编写了一个管道来解决问题:
import { Pipe, PipeTransform } from '@angular/core';
import { TrusthtmlPipe } from 'app/crm-modules/core/pipes/trusthtmlPipe';
import { DomSanitizer } from '@angular/platform-browser';
import { SafeHtml } from '@angular/platform-browser/src/security/dom_sanitization_service';
import { AttachmentInfo } from 'app/crm-modules/email/models/attachment-info';
import * as _ from 'lodash';
@Pipe({
name: 'cidToBase64'
})
export class CidToBase64Pipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {
this.sanitizer = sanitizer;
}
transform(html: any, attachments: Array<AttachmentInfo> = []): SafeHtml {
let htmlToParse;
if (typeof html === 'string') {
htmlToParse = html;
} else if (html instanceof Object && html.hasOwnProperty('changingThisBreaksApplicationSecurity')) {
htmlToParse = (html.changingThisBreaksApplicationSecurity !== null || html.changingThisBreaksApplicationSecurity !== undefined)
? html.changingThisBreaksApplicationSecurity
: '';
} else {
htmlToParse = '';
}
const parser = new DOMParser();
const doc = parser.parseFromString(htmlToParse, 'text/html');
if (attachments !== null && attachments !== undefined && attachments.length > 0 && htmlToParse.length > 0) {
const imageLinks = doc.getElementsByTagName('img');
for (let i = 0; i < imageLinks.length; i++) {
const imageLink = imageLinks[i];
const src = imageLink.getAttribute('src');
if (src !== null && src !== undefined && _.includes(src, 'cid:')) {
let cidInfo;
let fileName;
let fileIndex;
let useImage = true;
cidInfo = src.split('cid:');
useImage = cidInfo.length === 2;
if (useImage) {
fileName = cidInfo[1].split('@')[0];
fileIndex = _.findIndex(attachments, { 'name': fileName, 'inline': true });
useImage = fileIndex > -1;
}
if (useImage) {
imageLink.setAttribute('src', 'data:image/png;base64,' + attachments[fileIndex].content);
} else {
// @todo: show placeholder or remove the node...
}
}
}
}
const trustHtmlPipe = new TrusthtmlPipe(this.sanitizer);
return trustHtmlPipe.transform(doc.documentElement.innerHTML);
}
}
也许有帮助。
最诚挚的问候 克里斯托夫
关于javascript - 在 iframe 中渲染电子邮件时如何处理 cid 图像源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48342439/