HTML嵌入式PDF所有链接覆盖以在新选项卡中打开（target =“_ blank”）

I currently have a PDF embedded into an webpage. The PDF has several hyperlinks within it, but the links open in the parent frame when clicked. This takes the user to a new page with no option to return to the original PDF (navigation turned off). I can't seem to figure out how to get the links to open in a new window.

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

Sample PDF

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

Problem

Clicking second(External) link on this PDF will navigate to another website within the same tab.

单击此PDF上的第二个(外部)链接将导航到同一选项卡中的另一个网站。

Working Plunkr

The PDF documents were originally created in PowerPoint, which prevents me from adding the proper href attribute. Is there a way to modify links within a PDF to include target="_blank"?

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

If not, I'm wondering if there is a something I can include within the html code that would universally control how links open.

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

Any suggestions are welcome.

欢迎任何建议。

Thanks.

2 个解决方案

#1

Just to quickly qualify this answer, this should work for modern browsers, and only if the PDF and PDFJS are hosted on the same domain that you are embedding it in.

只是为了快速确定这个答案,这应该适用于现代浏览器,并且只有当PDF和PDFJS托管在您嵌入它的同一域中时。

The trick here is to force the use of PDF.js and override Chrome's default behavior of rendering it like an extension. That way you get an iframe with html elements you can manipulate if you don't try and do it CORS. If this is for a CORS related use case, you are pretty much out of luck as editing a CORS pdf is kind of a security risk and rightfully disallowed.

这里的诀窍是强制使用PDF.js并覆盖Chrome的默认行为,将其呈现为扩展名。这样你就得到了一个带有html元素的iframe,你可以操作,如果你不尝试做CORS。如果这是针对CORS相关的用例,那么你很不幸,因为编辑CORS pdf是一种安全风险并且是理所当然地不允许的。

You are going to want to start by getting a site set up following the example of "forced" usage. Resources here:

您将首先想要按照“强制”使用示例设置站点。这里的资源:

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

You'll need to run it on a webserver as well, because it won't server correctly off the filesystem alone.. Hooray more CORS issues.

您还需要在Web服务器上运行它,因为它无法单独从文件系统中正确服务。很多CORS问题。

Then, you'll set up your page and call it like this (based on @Paco's gist)

然后,你将设置你的页面并像这样调用它(基于@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://*.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>

#2

-1

Using Adobe Acrobat right click on the link properties. Click the Actions tab. If there are any actions listed delete them and then select Run a Javascript. Click add. A box will appear for you to add the following javascript. app.launchURL("http://www.yourlink.com", true);

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

#1