Angular项目中html2canvas无法渲染textarea文本与mat-icons问题求助

html2canvas 对表单元素（如<textarea>）和Angular Material组件（如<mat-icon>）的原生渲染逻辑支持有限：

• <textarea>的显示文本存储在value属性而非DOM文本节点中，html2canvas默认无法捕获该值
• <mat-icon>依赖外部字体文件渲染图标，html2canvas可能因字体加载问题或组件封装导致图标无法被正确识别

1. 修复<textarea>渲染问题 #

在调用html2canvas前，临时将textarea的value同步到其文本内容，渲染完成后恢复原状态：

// 同步textarea内容到DOM文本节点
const textareas = document.querySelectorAll('textarea');
textareas.forEach(ta => {
  ta.textContent = ta.value;
});

// 执行截图
html2canvas(document.querySelector('#target-table')).then(canvas => {
  // 恢复textarea原始状态
  textareas.forEach(ta => {
    ta.textContent = '';
  });
  // 处理生成的canvas（如添加到页面或下载）
  document.body.appendChild(canvas);
});

2. 修复<mat-icon>渲染问题 #

由于字体图标渲染依赖外部资源，建议将图标替换为内联SVG（避免字体加载问题），渲染完成后恢复原组件：

// 保存原始mat-icon节点
const originalIcons: Array<{el: Element, content: string}> = [];
const matIcons = document.querySelectorAll('mat-icon');

matIcons.forEach(icon => {
  originalIcons.push({
    el: icon,
    content: icon.innerHTML
  });
  
  // 根据图标名称创建对应内联SVG（以edit图标为例）
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('viewBox', '0 0 24 24');
  if (icon.textContent?.trim() === 'edit') {
    svg.innerHTML = '<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>';
  }
  
  // 替换mat-icon为SVG
  icon.replaceWith(svg);
});

// 执行截图后恢复原始节点
html2canvas(targetElement).then(canvas => {
  originalIcons.forEach(item => {
    const svg = document.querySelector(`svg[viewBox="0 0 24 24"]`);
    if (svg) svg.replaceWith(item.el);
    item.el.innerHTML = item.content;
  });
});

3. 优化html2canvas配置 #

添加以下配置提升渲染兼容性和清晰度：

html2canvas(targetElement, {
  scale: window.devicePixelRatio, // 适配高DPI屏幕
  allowTaint: true, // 允许加载跨域资源（如果字体是外部资源）
  logging: false // 关闭日志（如需调试可设为true）
});

import { Component } from '@angular/core';
import html2canvas from 'html2canvas';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  async generatePreview() {
    const target = document.querySelector('#preview-table');
    if (!target) return;

    // 处理textarea
    const textareas = target.querySelectorAll('textarea');
    textareas.forEach(ta => ta.textContent = ta.value);

    // 处理mat-icon
    const originalIcons: Array<{el: Element, content: string}> = [];
    const matIcons = target.querySelectorAll('mat-icon');
    matIcons.forEach(icon => {
      originalIcons.push({ el: icon, content: icon.innerHTML });
      const iconName = icon.textContent?.trim();
      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      svg.setAttribute('viewBox', '0 0 24 24');
      
      // 可扩展更多图标映射
      switch(iconName) {
        case 'edit':
          svg.innerHTML = '<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>';
          break;
        case 'delete':
          svg.innerHTML = '<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>';
          break;
      }
      icon.replaceWith(svg);
    });

    // 生成截图
    const canvas = await html2canvas(target, {
      scale: window.devicePixelRatio
    });

    // 恢复原始DOM结构
    textareas.forEach(ta => ta.textContent = '');
    originalIcons.forEach(item => {
      const svg = target.querySelector(`svg[viewBox="0 0 24 24"]`);
      if (svg) svg.replaceWith(item.el);
      item.el.innerHTML = item.content;
    });

    // 预览截图
    document.body.appendChild(canvas);
  }
}

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