如何使用jsPDF js库在PDF中创建超链接?

Dev*_*rma 5 javascript jspdf

JavaScript:

    function demoJsPdf() {
        var doc = new jsPDF("landscape", "mm", "a4");

        doc.setFontSize(22);
        doc.text(20, 20, 'This is a exmaple of jsPDF');

        doc.setFontSize(16);
        doc.text(20, 30, 'This example is created by dsharma4u29.');
        doc.fromHTML('<a href="javascript:window.print()">Print</a>', 20, 60, {'width': 10, 'elementHandlers': specialElementHandlers});

        var iframe = document.getElementById('output');
        iframe.style.width = '100%';
        iframe.style.height = '400px';
        iframe.src = doc.output('datauristring');
    }

    var specialElementHandlers = function() {
        return;
    }
Run Code Online (Sandbox Code Playgroud)

HTML:

    <html>
    <body>

    <div>
        <a href="javascript:demoJsPdf()" class="button">Run Code 2</a>
    <iframe id="output"></iframe>
    </div>

    </body>
    </html>
Run Code Online (Sandbox Code Playgroud)

现在文本“Run Code 2”必须显示为超链接,但它只是显示为简单文本,而不是超链接。如何将其作为 PDF 上的超链接实现?

Eri*_*ans 8

jsPDF 有两个用于添加超链接的工具.link().textWithLink(),它们自 2014 年 11 月起可用。它们没有很好的文档记录,但您可以在此处找到有关如何使用它们的一些信息。

// Create text 'Hello World!' with a link
doc.textWithLink('Hello World!', 25, 25, {url: 'https://www.example.com/'});

// Create a rectangle and place a link box on top of it.
doc.rect(25, 50, 25, 25, 'FD');
doc.link(25, 50, 25, 25, {url: 'https://www.example.com/'});
Run Code Online (Sandbox Code Playgroud)

您还可以使用html2pdf,它将任何 HTML 呈现为 PDF 并自动为所有<a>锚标记添加超链接。


小智 5

在当前版本中,只要您写出整个 URL,所有内容都会自动链接

例子:doc.text(20, 30, 'http://www.google.com');

会自动链接到Google。

这是一个 hack,但如果您需要在按钮或图像或其他东西上使用它,最简单的答案就是将文本 URL 隐藏在顶层的同一位置。不过,请注意将其隐藏在实际文本之上 - 它往往会混乱在一起,最终得到的 URL 是两者的组合。