Embedding a PDF file in a page

Products

  • . Xara Designer Pro X
  • . Web Designer

Topic

  • . Import & export

Follow these step-by-step instructions to embed a PDF in your page:

  1. Click and drag the PDF file onto an empty page in your project.
  2. A message will appear asking if you want to import the file as a page or add it as a link. 
  3. Select "Import" if you want to add all PDFs to your project as standalone pages.
  4. Select "Add Link" if you want to embed the PDF file as an object which can be opened (recommended).
  5. Check the preview monitor to view the embedded file.

You can also add documents to pages as iframes. To do this, follow these instructions:

  1. Click and drag the PDF file onto an empty page in your project.
  2. A message will appear asking if you want to import the file as a page or add it as a link. 
  3. Select "Add Link". Doing this links the PDF file to your project so that it will be uploaded to the server when you publish the project. 
  4. Move the PDF icon off of the page or onto the MouseOver layer so that the icon will not be visible to users of the site.
  5. Add a placeholder to the page (e.g. a rectangle).
  6. Right-click the placeholder and select "Web Properties".
  7. In the next menu, open the "Placeholder" tab.
  8. Enable "Replace with HTML code" and click "HTML code (body)".  
  9. Insert the lines of code provided below and click "OK".

The code you need to add is: 

<object data="index_htm_files/File_Name.pdf" type="application/pdf" height="800" width="800"><embed src="index_htm_files/File_Name.pdf" type="application/pdf" /></object>

Parts of the code need to be changed to match your individual needs.

  1. Replace "File_Name.pdf" with the name of your PDF file.
  2. Change the height and width values to match the dimensions of your page (in our example these are set to 800 pixels).
  3. Check the results in the preview monitor.

You can also link documents to other websites. To do this, follow these instructions:

  1. Create a new project.
  2. Do not name the first page "index". Instead, give it another name.
  3. Design the page however you want. Essentially the only thing that needs to be seen is the formatted text.
  4. Upload the project to your FTP server. 
  5. Now, click on your website project and create a new placeholder.
  6. Right-click the element and select "Web Properties".
  7. In the next menu, open the "Placeholder" tab.
  8. Enable "Replace with HTML code" and click "HTML code (body)".
  9. Insert the lines of code provided below and click "OK".

The code you need to add is: 

<iframe src="File_Name.htm" width="800" height="800" scrolling="yes"></iframe>

Parts of the code need to be changed to match your individual needs.

  1. Replace "File_Name.htm" with the name of the page from the other project.
  2. Change the height and width values to match the dimensions of your page (in our example these are set to 800 pixels).
  3. The results cannot be viewed until you publish the project. The contents of the iframe will be displayed when the page is opened online.