我来帮你把原生JS的逻辑迁移到Angular 2组件里，一步步来：

1. 准备依赖 #

首先，如果你还没安装jsPDF，先通过npm搞定它：

npm install jspdf --save

对于canvg，你已经有本地的canvg.js的话，把它放到项目的assets目录，然后在index.html里引入（就像你之前做的那样）：

<script src="assets/canvg.js"></script>

要是想更规范，也可以直接用npm安装canvg包：

npm install canvg --save

2. 组件代码实现 #

Angular里不推荐直接用document.getElementById，咱们用ViewChild来获取DOM元素更符合框架规范：

先在组件模板（比如your-component.component.html）里给SVG容器和按钮加模板引用变量：

<div #svgContainer>
  <!-- 你的SVG内容放在这里 -->
</div>
<button (click)="generatePdf()">生成PDF</button>

然后在组件类（your-component.component.ts）里写核心逻辑：

import { Component, ViewChild, ElementRef } from '@angular/core';
import * as jsPDF from 'jspdf';

// 如果你是npm安装的canvg，取消下面的注释
// import { canvg } from 'canvg';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  @ViewChild('svgContainer') svgContainer!: ElementRef;

  generatePdf() {
    // 获取SVG的内容
    const svgElement = this.svgContainer.nativeElement;
    let svgContent = svgElement.innerHTML;
    if (svgContent) {
      // 清理换行和多余空格
      svgContent = svgContent.replace(/\r?\n|\r/g, '').trim();
    }

    // 创建canvas并渲染SVG
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    if (ctx) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // 全局引入的canvg直接调用就行
      canvg(canvas, svgContent);
      // 要是npm安装的，可能需要用canvg.default(canvas, svgContent)，看具体版本

      // 把canvas转成图片数据
      const imgData = canvas.toDataURL('image/png');

      // 生成并下载PDF
      const doc = new jsPDF('p', 'pt', 'a4');
      doc.addImage(imgData, 'PNG', 40, 40, 75, 75);
      doc.save('test.pdf');
    }
  }
}

3. 一些注意点 #

• 如果用npm安装的canvg，部分版本需要用canvg.default来调用渲染函数，要是报错可以试试这个写法。
• Angular里尽量用ViewChild获取DOM元素，避免直接操作document，这样能更好地配合Angular的变更检测机制。
• 确保SVG里没有跨域的外部资源，不然canvas渲染会失败，导致PDF里没有内容。

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