logo标签列表

如何使用jsPDF库创建PDF中的超链接？

javascriptjspdf
10

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;
    }

HTML：

    <html>
    <body>

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

    </body>
    </html>

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

超链接目前还不支持，有人已经实现了它，但尚未向公众发布，请随意催促他：https://github.com/MrRio/jsPDF/issues/170#issuecomment-46093835 :-) - diegocr
3个回答
14

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/'});

您还可以使用我的库html2pdf，它会将任何HTML渲染为PDF并自动为所有<a>锚标签添加超链接。

有没有办法让这些链接在新标签页中打开？ - Tobias Glaus
5

在当前版本中，只要你完整的写出URL地址，所有链接都会自动链接

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

将自动链接到Google。

这是一个技巧，但如果你需要在按钮或图像上使用它，最简单的方法就是将文本URL隐藏在顶层的同一位置。不过要注意不要把它隐藏在实际文本的上面，否则它们可能会混杂在一起，你最终得到的URL将是两者的组合。

1
虽然它没有超链接的灵活性，但这也是值得知道的。 - Trevor
3
你可以使用 .textWithLink() 来模仿标准的HTML超链接。
doc.textWithLink('Vist StackOverflow here', posX, posY, {url: 'https://stackoverflow.com/'});

这里有一个jsFiddle的示例。

同样，正如@Erin Kerrigan所指出的，如果您将链接指定为普通文本对象，则它将自动成为链接

doc.text(20, 30, 'http://www.stackoverflow.com');
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接