0

Use Case: I am using inDesign server to render a PDF with images and text that I would like to be editable through a web interface. The UX I'm imagining involves looking at the rendered PDF and clicking the images you want to swap out.

Potential Solutions: I thought the easiest way to do this would be to render the initial image as a PDF where each replaceable image or text box would be a hyperlink. If I could make the hyperlink just "doFunction()" that would be ideal, but it seems like InDesign doesn't allow that, and that's not really how hyperlinks work anyway.

My second idea was to have the PDF embedded in an HTML document that would be shown in the main window through an iFrame. Hyperlinks would then be pointed to that inner HTML page with info about the clicked link appended to the URL. For example, the hyperlink would be directed to /path/to/iFrameHTML?firstImage, and from the main page I could extract the src of the iFrame to determine what image was clicked. This worked in IE10, but not Firefox (src was not updated) or Chrome (seemingly nothing happened).

I'm looking for any other creative solutions that might be out there!

Below is my second idea in quick-and-dirty HTML:

pdfHyperlinks.html (main page)

<html style="height:100%">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <body style="padding:0px; margin:0px; height:100%">
        <table style="width:100%;height:100%">
            <tr style="height:100%">
                <td style="width:50%">
                    <div id="left_column">
                        <input type="button" onclick="alert(document.getElementById('myIframe').contentWindow.location.href)" value="get current location"/>
                    </div>
                </td>
                <td style="width:50%;height:100%">
                    <div id="pdfViewer" style="position:relative;height:100%;width:100%">

                        <iframe src="pdfIframe.html" frameBorder="0" id="myIframe" style="display:block;height:100%;width:100%" />
                    </div>
                </td>
            </tr>
        </table>    
    </body>
    <script type="text/javascript">
    function updateLC(){
        alert(document.getElementById("myIframe").contentWindow.location.href);
    }
    </script>
</html>

pdfIframe.html (displayed in iFrame)

<html>
<head>
<base target="_parent" />
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <body style="overflow: hidden; padding:0px; margin:0px; height:100%">
        <script type="text/javascript">document.write(location.href);</script>
        <br />
        <object id="pdfObect" data="linked.pdf" type='application/pdf' style="position: absolute; height: 100%; width: 100%; overflow: hidden;" />
    </body>
    <script type="text/javascript">

    </script>
</html>

In this example, the hyperlinks in linked.pdf are directed to http://localhost:8000/pdfIframe.html?imageID

Jongware
  • 22,200
  • 8
  • 54
  • 100
jellenberger
  • 506
  • 2
  • 9
  • I am not sure but I think it is possible duplicate of this topic. http://stackoverflow.com/questions/9219807/using-javascript-inside-a-pdf – CntkCtn Sep 21 '15 at 15:15
  • Yeah, I've looked around and seen a couple of posts like this. If I were building the pdf's by hand in Acrobat then I think this would be the solution, but because I'm just exporting them from InDesign (as pdf's because that's the only portable hyperlinkable format I know of) I don't have that kind of control. I _think_ I have to deal with linking on the client side. – jellenberger Sep 21 '15 at 15:22

0 Answers0