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

时间:2014-08-26 08:13:13

标签: 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;
    }

HTML:

    <html>
    <body>

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

    </body>
    </html>

现在文字&#34;运行代码2&#34;必须显示为超链接,但它只是显示为简单文本,而不是超链接。如何将其作为PDF上的超链接实现?

3 个答案:

答案 0 :(得分:3)

使用当前版本,只要您写完整个网址,所有内容都会自动链接

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

会自动链接到Google。

这是一个黑客,但如果您需要按钮或图像或其他东西,最简单的答案就是将文本网址隐藏在顶层的同一位置。观看将其隐藏在实际文本之上,但它往往会混杂在一起,最终会得到一个两者组合的URL。

答案 1 :(得分:3)

jsPDF有两个用于添加超链接.link().textWithLink()的工具,这些工具已于2014年11月开始提供。它们没有很好的文档记录,但您可以找到有关如何获取的一些信息使用它们here

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

答案 2 :(得分:1)

您可以使用.textWithLink()来模仿标准的HTML超链接。

doc.textWithLink('Vist StackOverflow here', posX, posY, {url: 'https://stackoverflow.com/'});

这里是一个带有示例的jsFiddle


@Erin Kerrigan也有pointed out,如果您只是将链接指定为常规文本对象,它将自动成为链接

doc.text(20, 30, 'http://www.stackoverflow.com');