HTML嵌入式PDF所有链接覆盖以在新标签页中打开(target =“_ blank”)

时间:2015-08-26 13:51:26

标签: javascript html pdf powerpoint

我目前在网页中嵌入了PDF。 PDF中包含多个超链接,但单击时链接在父框架中打开。这会将用户带到一个新页面,但不能选择返回原始PDF(导航已关闭)。我似乎无法弄清楚如何在新窗口中打开链接。

示例PDF

<embed src="https://www.antennahouse.com/XSLsample/pdf/sample-link_1.pdf" type="application/pdf" />

问题

  

点击此PDF上的第二个(外部)链接将导航至   同一标签内的另一个网站。

工作Plunkr

PDF文档最初是在PowerPoint中创建的,这使我无法添加正确的href属性。有没有办法修改PDF中的链接以包含target =“_ blank”?

如果没有,我想知道是否有一些我可以在html代码中包含的东西,它将普遍控制链接的打开方式。

欢迎任何建议。

感谢。

2 个答案:

答案 0 :(得分:2)

仅是为了快速限定此答案,它应该对现代浏览器有效,并且仅在 (如果PDF和PDFJS托管在您将其嵌入的同一域中)上有效

此处的技巧是强制使用PDF.js并覆盖Chrome的默认行为,即将其呈现为扩展名。这样,您将获得一个包含html元素的iframe,如果不尝试进行CORS操作,就可以操作 。如果这是针对与CORS相关的用例,那么您就很不走运了,因为编辑CORS pdf会带来安全风险,因此是不应该的。

您将首先要按照“强制”用法示例设置网站。此处的资源:

https://github.com/mozilla/pdf.js/wiki/Setup-PDF.js-in-a-website https://pdfobject.com/examples/pdfjs-forced.html

您还需要在网络服务器上运行它,因为它不能单独在文件系统上正确地进行服务器服务。困扰着更多的CORS问题。

然后,您将建立您的页面并按此称呼它(基于@Paco的要旨)

<html>
<head>
    <title>test pdf</title>
</head>
<div id="pdf"
     style="width:900px; height:500px"></div>
<script src="https://pdfobject.com/js/pdfobject.min.js"></script>
<script>
    var options = {
        pdfOpenParams: {
            page: 1,
            view: "Fit",
            toolbar: 0
        },
        forcePDFJS: true, //*** Forces the use of PDF.js instead of default behavior
        PDFJS_URL: "web/viewer.html" //*** Required to use PDF.js
    };
    PDFObject.embed("../pdf-test.pdf", "#pdf", options);

    document.querySelector('#pdf iframe').onload = function () {
        //can try and hook the PDF.js event for rendering completed and call it then instead. 
        //https://stackoverflow.com/questions/12693207/how-to-know-if-pdf-js-has-finished-rendering
        setTimeout(function () {
            document.querySelector('#pdf iframe').contentDocument.querySelectorAll('a:not(.bookmark)').forEach(function (a, i) {
                a.setAttribute('target', '_blank');
            })
        }, 5000)

    }
</script>
</body>
</html>

答案 1 :(得分:-1)

使用Adobe Acrobat右键单击链接属性。单击“操作”选项卡。如果列出了任何操作,请删除它们,然后选择Run a Javascript。单击添加。将出现一个框,供您添加以下javascript。 app.launchURL(“http://www.yourlink.com”,true);