Angular中使用jsPDF创建可在新标签页打开的超链接方法

1. 安装依赖 #

首先确保项目中已安装jsPDF库，执行以下命令：

npm install jspdf --save

2. 组件实现代码 #

在你的Angular组件中，导入jsPDF并编写生成PDF的方法，示例如下：

import { Component } from '@angular/core';
import jsPDF from 'jspdf';

@Component({
  selector: 'app-pdf-generator',
  template: `<button (click)="generatePDF()">生成带超链接的PDF</button>`
})
export class PdfGeneratorComponent {

  generatePDF(): void {
    // 创建jsPDF实例
    const doc = new jsPDF();

    // 添加带超链接的文本，设置linkTarget为'_blank'确保新标签页打开
    doc.text('点击此链接打开示例网站', 20, 20, {
      link: 'https://example.com',
      linkTarget: '_blank'
    });

    // 可选：创建自定义可点击矩形区域
    const linkRect = doc.addLink();
    doc.setLink(linkRect, 'https://example.com', '_blank');
    doc.rect(20, 30, 100, 15, 'S'); // 绘制矩形可点击区域
    doc.text('矩形可点击区域', 22, 40); // 在区域上添加提示文本

    // 保存PDF
    doc.save('带超链接的PDF.pdf');
  }
}

关键点说明 #

• 使用doc.text()时，通过配置项link指定目标URL，linkTarget: '_blank'强制链接在新标签页打开，确保跨阅读器兼容性。
• 若需要图片、自定义图形等可点击区域，先用addLink()创建链接对象，再通过setLink()绑定URL和打开方式，最后绘制对应元素覆盖链接区域即可。

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