Ionic 3中发送二维码至邮箱失败，提示“无法附加文件”求助

当然支持啦！你遇到的“无法附加文件”问题，核心原因是你直接把二维码的文本值createdCode当成了附件，但邮箱附件需要的是图片文件（比如base64格式或本地路径），而不是二维码的内容文本。ngx-qrcode生成的是页面上的SVG/Canvas元素，得先把它转换成可附加的图片文件才行。

下面是具体的修复步骤：

1. 修改HTML模板，给二维码元素添加标识 #

先给ngx-qrcode加一个模板引用变量，方便后续在TS里获取这个元素：

<ion-card *ngIf="createdCode">
  <ngx-qrcode #qrCodeElement *ngIf="createdCode" [qrc-value]="createdCode"></ngx-qrcode>
  <ion-card-content>
    <p>Value: {{createdCode}}</p>
  </ion-card-content>
  <button ion-button (click)="sendEmail()">Send Email</button>
</ion-card>

2. 修改TS代码，将二维码转为图片并添加为附件 #

我们需要把页面上的二维码元素（默认是SVG）转换成base64格式的图片，再作为附件添加到邮件配置中：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { EmailComposer } from '@ionic-native/email-composer';

@Component({
  selector: 'your-component',
  templateUrl: 'your-component.html'
})
export class YourComponent {
  createdCode: string; // 这里是你生成的二维码内容文本
  @ViewChild('qrCodeElement') qrCodeElement: ElementRef;

  constructor(private emailComposer: EmailComposer) {}

  sendEmail() {
    // 获取页面上的SVG二维码元素
    const svgElement = this.qrCodeElement.nativeElement.querySelector('svg');
    if (!svgElement) {
      console.error('找不到二维码元素');
      return;
    }

    // 将SVG转为base64图片
    const svgData = new XMLSerializer().serializeToString(svgElement);
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();

    img.onload = () => {
      // 设置画布尺寸和二维码一致
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);

      // 获取PNG格式的base64图片
      const qrImageBase64 = canvas.toDataURL('image/png');

      // 配置邮件参数
      const emailConfig = {
        to: '',
        cc: '',
        attachments: [
          {
            base64: qrImageBase64,
            name: 'student-qrcode.png' // 附件显示的名称
          }
        ],
        subject: 'New QR code',
        body: 'This is new QR code for student <br><br>',
        isHtml: true
      };

      // 打开系统邮件客户端
      this.emailComposer.open(emailConfig);
    };

    // 加载SVG图片
    img.src = `data:image/svg+xml;base64,${btoa(svgData)}`;
  }
}

3. 额外注意事项 #

• 确保你已经正确安装并配置了@ionic-native/email-composer插件：在app.module.ts中导入并添加到providers数组里
• 必须在真实设备或模拟器上测试，浏览器环境不支持EmailComposer插件的功能
• 如果你的ngx-qrcode生成的是Canvas而不是SVG，可以直接获取Canvas元素的toDataURL()，省略SVG转Canvas的步骤

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