Angular 2实现点击文档链接自动打开带附件的Outlook窗口

首先得给你点明一个核心限制：浏览器的安全策略不允许前端JavaScript直接访问本地文件系统，而且标准的mailto:协议本身并不支持自动添加附件——这也是你直接尝试实现时卡壳的关键原因。不过我们可以通过一些变通方案来贴近你想要的效果，下面是具体的实现思路和代码：

方案1：生成带文档下载链接的邮件草稿（纯前端可行） #

这个方案没法自动帮用户把文档直接塞进Outlook附件，但可以在邮件正文中附上文档的直接下载链接，引导用户一键下载后添加附件，体验上也算顺畅。

组件模板（.html） #

<a (click)="openOutlookWithDoc('https://your-server-address/abc.pdf')">发送带文档的邮件</a>

组件逻辑（.ts） #

import { Component } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-mail-trigger',
  templateUrl: './mail-trigger.component.html'
})
export class MailTriggerComponent {
  constructor(private sanitizer: DomSanitizer) {}

  openOutlookWithDoc(docUrl: string): void {
    // 构造mailto链接，包含主题、正文和文档下载链接
    const subject = encodeURIComponent('请查收相关文档');
    const body = encodeURIComponent(`您好，所需文档可点击下载：${docUrl}\n\n下载后请将文件添加到邮件附件发送。`);
    const mailtoUrl = `mailto:?subject=${subject}&body=${body}`;
    
    // 净化URL避免Angular的安全拦截
    const safeMailtoUrl: SafeUrl = this.sanitizer.bypassSecurityTrustUrl(mailtoUrl);
    
    // 打开默认邮件客户端（这里会唤起Outlook，如果它是系统默认邮件应用）
    window.open(safeMailtoUrl.toString());
  }
}

方案2：依赖Outlook桌面协议（仅适用于特定环境） #

如果你的用户都是Windows系统且Outlook是默认邮件客户端，可以尝试用outlook:mailto协议配合本地文件路径，但有个硬前提：文档必须已经在用户的本地电脑上——前端无法直接获取服务器上的文档并附加到Outlook，因为浏览器不允许跨域访问本地文件系统。

如果文档是用户上传的本地文件，你可以尝试（注意兼容性很差）：

openOutlookWithLocalDoc(file: File): void {
  // 提示：现代浏览器大多会隐藏真实本地路径，只返回虚拟路径，这个方法仅在旧版浏览器/特定环境下有效
  const localFilePath = file.path;
  const outlookUrl = `outlook:mailto?to=&subject=文档附件&attachment=${localFilePath}`;
  window.open(outlookUrl);
}

关键提醒 #

纯前端（仅Angular 2）无法实现自动将服务器上的文档附加到Outlook，因为浏览器的安全限制，前端没有权限直接操作本地邮件客户端的附件功能。如果必须实现自动附加的需求，你得配合后端服务：后端生成带附件的邮件草稿，再提供链接让用户导入到Outlook，或者直接通过后端发送邮件。

内容的提问来源于stack exchange，提问作者Mohit Dixit