【问题标题】:HTML embedded PDF all links override to open in a new tab (target="_blank")HTML 嵌入式 PDF 覆盖所有链接以在新选项卡中打开 (target="_blank")
【发布时间】:2015-08-26 13:51:25
【问题描述】:

我目前有一个嵌入网页的 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 代码中包含可以普遍控制链接打开方式的内容。

欢迎提出任何建议。

谢谢。

【问题讨论】:

    标签: javascript html pdf powerpoint


    【解决方案1】:

    只是为了快速限定这个答案,这应该适用于现代浏览器,并且如果 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>
    

    【讨论】:

      【解决方案2】:

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

      【讨论】:

      • 对于 html 页面中的所有链接,包括 iframe 或嵌入对象,是否有任何通用方法可以使用 app.launchURL("http://www.yourlink.com", true);
      • 问题是在 HTML/CSS/JavaScript 中寻找通用方法来覆盖嵌入式 PDF 的链接目标。使用 Acrobat 编辑 PDF 不是一个可接受的答案。
      • @Paco 你能得到一个工作的codepen或其他东西吗,原来的似乎因为CORs而死了
      • 感谢@MattiPrice,这是一个可以保存到文件中的 HTML 要点,然后加载到大多数浏览器中以显示示例:gist.github.com/ceteri/0ae116347c4ec94e191f387c3f824681
      猜你喜欢
      • 1970-01-01
      • 2017-05-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-01-20
      • 2017-01-28
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多