Multiple Page PDF Document in Website

[Tazz]

Hello everyone.

So I have a question that I'm hoping I can get help with and possible suggestions or ideas.

I'm creating a website, and on the site, I need to display a 10-page pdf document. I'm curious as to how this would be accomplished in the best manner for a viewer. But wait, there's more...

I've placed PDF files within a website before as a link, you click, read, or print, I don't want this, but I want the document and each page of it to be just a readable page. They can still print it if they need to, but I just want full-size (8.5 x 11) document pages one after the other. So I can just paste each page on a single webpage, one after the other on a single webpage, which of course makes one heck of a long webpage that a visitor can just scroll down/through. Or as I have read online, which I don't fully understand the benefit of, you import the PDF file and Xara automatically makes each document page an individual webpage. This seems kind of weird as you would have to manually click to get to each page!? Or is this the way to go and just place a "Next Page", and/or "Previous Page" button on each page? I don't want a third-party flipbook idea. I tried that and it's just not good on a free level and for a one-time project, it wouldn't behoove me to spend the money for it.

So, what do you all think is the best, most feasible way of accomplishing this? I do want what is best for the integrity, speed, SEO, etc., of the website. Any and all suggestions will be appreciated as always!

Thank you, Tazz

[Acorn]

Tazz, it depends on how recent the Xara version is that you are using.

What I do is drag my PDF onto the design page and pick Import.
This adds all the PDF as separate pages into new pages under the page you dropped the PDF onto.
It is possible to change a website to Scroll and so you have a very long "page" made up of your website and PDF mixed together.

Now that might not best suit a conventional website so here I have a link from the website to a subsite that is just the PDF pages as above but created as a separate Scroll with Scale to Fit Width set to maximum of around 800px so it will fit onto a phone without side-scrolling.
You will probably have space to put a sticky/repeating Back/Close button to allow the viewer to return to where they were.
The simplest way is to open the PDF sub-site Link in a new Tab so when closed the launch position on the main site is unchanged.
The other is to add some JavaScript to achieve a back to last page.

Acorn

[Tazz]

Tazz, it depends on how recent the Xara version is that you are using.

What I do is drag my PDF onto the design page and pick Import.
This adds all the PDF as separate pages into new pages under the page you dropped the PDF onto.
It is possible to change a website to Scroll and so you have a very long "page" made up of your website and PDF mixed together.

Now that might not best suit a conventional website so here I have a link from the website to a subsite that is just the PDF pages as above but created as a separate Scroll with Scale to Fit Width set to maximum of around 800px so it will fit onto a phone without side-scrolling.
You will probably have space to put a sticky/repeating Back/Close button to allow the viewer to return to where they were.
The simplest way is to open the PDF sub-site Link in a new Tab so when closed the launch position on the main site is unchanged.
The other is to add some JavaScript to achieve a back to last page.

Acorn

Hi Acorn, hope you're doing well. Thank you for your suggestions. I did do the import PDF option that put each sheet on a separate page before writing this post. BUT I didn't think about the SCROLL option on the site. That might be the way to go. It just simplifies, and in a way joins all those separate pages together as one, in a sense. The second option was one of my first thoughts but, I didn't want to click out of the main site. Not that it probably matters, but I want the navigation button to just go right to the page with the informational sheets right there for them to easily view and read.

I really appreciate your help Acorn. Always! I believe I will try your SCROLL suggestion!

Thanks, Tazz

[Chris M]

I would use Acorn's sub-site method, also using Scroll Vertically, but I would present it as an iFrame.

<iframe src="https://your-domain.com.au/sub-folder/"
width="100%" height="100%"
frameborder="0"
scrolling="auto" >
<p>Your browser does not support iframes.</p>
</iframe>

Create a placeholder using a Rectangle to suit the width and height you want your PDF to show. Your placeholder will act as a window to watch your PDF as you scroll by.
Paste the code in the HTML Code (Body) section of the placeholder.

[Initiostar]

Same principle as suggested above; an example here of a PDF User Guide for Software.

(a) scrolls horizontally
(b) opens as a full screen in a new window and
(c) allows to the visitor to view and download

https://initiostar.co.uk/omnidisplay.htm and https://initiostar.co.uk/omniticker.htm > scroll down the pages to see the PDFs

PDFs have a table of contents, forward and back buttons and a start (home page) link that returns to the TOC. PDFs maintained as separate documents which makes them easier to manage.

[Acorn]

Just to stir the mix a little more.
Instead of unpacking a PDF into separate Xara pages, keep it as a PDF and use the same approach as @Chris M with an IFRAME.
The PDF scales to the size of the Placeholder, unlike full size Xara pages so it is more flexible. If shorter that the page then you simply scroll.

However, full size it still possible.
Set the Placeholder to the PDF page size plus an extra half inch or centimetre for the PDF controls and vertical scroll, so here 9"x11.5".
In Web Properties > Link > Link to file (PDF ...), use the Browse button to navigate to your PDF file, select it and click the Open button.
Copy the PDF filename in the box.
Open the Placeholder and type in:

<iframe src="index_html_files/<PDF filename>.pdf" width="100%" height="100%"></iframe>

or use "index_htm_files/<PDF filename>.pdf" depending on your default HTML export setting.

My further embellishment is to put the Placeholder in a pop-up layer and have a simple button to open it.
My PDF is set Sticky and is at top of the page.
I have a large 50% transparent box under the Placeholder to lightbox effect the display.
This has a popup: close link.

Thought you would be interested.

Acorn

[Acorn]

Here is a demo: IFRAME - embed PDF in Pop-up.xar

Acorn