Word documents on web

By: CodexWorld
|
In: HTML&CSS
|
Last Updated: Mar 28, 2022

In most cases, a hyperlink is used to link word or excel documents on the web page that allow users to download these files on the local drive. Word or Excel documents can’t be displayed directly on the browser like PDF. The HTML tag can be used to embed PDF documents on the web page. But MS Office files are required a third-party service to embed word documents on the web page. This tutorial will explain how to embed MS word and excel files on the web page using HTML.

The Office Web Viewer service is an easy and effective way to embed Word and Excel files in the HTML page and display word/excel documents on the browser. You can display word and excel documents in the HTML web page using the Office Web Viewer link.

Some advantages of the Office Web Viewer link:

• Embed word (doc/docx) files in HTML.
• Embed excel (xls/xlsx) files in HTML.
• Display .doc/.docx/.xls/.xlsx files on the web page.
• View the word and excel documents from the website.

Create Office Web Viewer Link:
To embed MS Office documents in the HTML page, specify the document URL (absolute URL) in the src parameter of the Office Web Viewer link.

https://view.officeapps.live.com/op/embed.aspx?src=<Document_URL>

Note: The <Document_URL> should be an absolute URL of the document that you want to embed. Also, the document must be accessible publicly on the internet.

Embed Word and Excel File in HTML

The HTML iframe tag is used to display a web page in HTML. We will use <iframe> tag to embed word/excel document in HTML web page using Office Web Viewer link.

Use the following code to embed Word file in the HTML web page:

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=https://www.codexworld.com/files/Brochure.docx' width='100%' height='650px' frameborder='0'></iframe>

Use the following code to embed Excel file in the HTML web page:

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=https://www.codexworld.com/files/assignment-tracker.xlsx' width='100%' height='650px' frameborder='0'></iframe>

You can use the above code to embed and display all types of the Microsoft Office documents (.doc, .docx, .xls, .xlsx, .ppt, .pptx) in HTML.

RELATED TUTORIALS

Leave a reply

• 
• Видео-Монтаж

Отличное ПО для создания своих первых видеороликов (все действия идут по шагам!).
Видео сделает даже новичок!

• 
• Ускоритель компьютера

Программа для очистки Windows от «мусора» (удаляет временные файлы, ускоряет систему, оптимизирует реестр).

1. 

   1

   Open Google Drive. Go to https://drive.google.com/ in your web browser. This will open your Google account’s Drive contents if you’re logged in.

   • If you aren’t logged in, enter your email address and password first.
   • You may need to click Go to Google Drive before proceeding.

2. 

   2

   Click NEW. It’s a blue button in the upper-left corner of the page. A drop-down menu will appear.

   Advertisement

3. 

   3

   Click File upload. This is in the drop-down menu. Doing so will open a window.

4. 

   4

   Select your Word file. Double-click the Word file that you want to embed on your website. This will prompt it to upload into Google Drive.

   • It shouldn’t take more than a few seconds for most Word documents to upload to Drive.

5. 

   5

   Open Google Sites. Go to https://sites.google.com/new in your web browser.

   • If you aren’t logged into your Google account when you do this, you’ll be prompted to enter your email address and password before continuing.

6. 

   6

   Select your Google Site. Click on the Google Site on which you want to insert the Word document.

7. 

   7

   Go to the page that you want to use. Scroll down until you arrive on the page on which you want to insert the Word document.

8. 

   8

   Click the INSERT tab. It’s in the upper-left side of the Google Sites window.

9. 

   9

   Click From Drive. This option is below the «Google Drive» heading near the top of the page.

10. 

    10

    Select the document. In the right-hand column, click the document that you want to insert.

11. 

    11

    Click INSERT. It’s in the lower-right corner of the page. This will place the Word document on your website.

12. 

    12

    Resize the document. Click and drag the top or bottom of the document to adjust its vertical size, or click and drag one of its sides to adjust the overall size of the document on your site.

13. 

    13

    Click PUBLISH. It’s the purple button in the top-right corner of the page. This will update your website with your uploaded document; you should now be able to see your Word document embedded in your Google Site.

Advertisement

1. 

   1

   Open WordPress. Go to https://wordpress.com/ in your web browser. While you can’t embed an image of your document on a WordPress domain, you can embed a link that downloads the WordPress file when clicked.

   • If you aren’t logged into your WordPress account, first click Log In in the top-right corner of the page, then enter your email address and password.

2. 

   2

   Click My Site. It’s in the upper-left corner of the WordPress page. Doing so will load your site’s page.

3. 

   3

   Click View Site. This option is in the upper-left side of the page.

4. 

   4

   Click Visit Site. It’s in the upper-right side of the page. This will take you to your site.

5. 

   5

   Go to the page that you want to use. Click the tab for the page on which you want to insert your Word document link; you’ll usually find these tabs at the top of the page.

6. 

   6

   Click Edit. You’ll find this option in the bottom-right side of the page.

7. 

   7

   Choose a place for your link. Click on the page the place in which you want to insert a link for your Word document.

8. 

   8

   Click ＋ Add. This is a button on the left side of the page. A pop-up menu will appear.

9. 

   9

   Click Media. It’s an option near the top of the pop-up menu. Doing so opens a page with all of your website’s stored media.

10. 

    10

    Click Add New. This is in the upper-left side of the page that opens.

11. 

    11

    Select a Word document. Click the Word document that you want to use on your site, then click Open in the bottom-right corner of the window. This will upload the Word document to the storage section of WordPress.

12. 

    12

    Select the uploaded document. Click the Word document to do so.

13. 

    13

    Click Insert. It’s in the bottom-right side of the window. This will insert a link to your Word document.

14. 

    14

    Change the link text. If you want the link text to say something other than the Word document’s name, select the link once, click the pencil-shaped icon next to the link that appears, change the text in the «Link Text» field, and click Save.

15. 

    15

    Click Update. It’s a blue button in the top-right corner of the page. This will update your website with your uploaded document, allowing you to click the embedded link to download the Word document.

Advertisement

1. 

   1

   Upload the Word document to your website’s root folder. When hosting your own website, you should have a folder that contains the resources (e.g., pictures) that appear on your website. You’ll need to place your Microsoft Word document in this folder.

   • This step will depend heavily upon the software that you use to host your website.

2. 

   2

   Copy the Word document’s address. Again, this step will depend on the software that you use to host your website, but you can usually find the address in a URL bar at the top of the page. Click and drag your mouse across the address to select it, then press Ctrl+C (Windows) or ⌘ Command+C (Mac).

3. 

   3

   Open your website’s code document. Open the text or HTML document in which your website’s code is stored.

4. 

   4

   Select a place for the link. Find the place in which you want to insert the link for your Word document, then click that place.

5. 

   5

   Create the HREF tag. Type in <a href= into your text editor.

6. 

   6

   Paste in the Word document’s address. Press Ctrl+V (Windows) or ⌘ Command+V (Mac).

7. 

   7

   Close the HREF tag. Type in > to close the tag. You should now have a line of text that reads<a href=link> here.

8. 

   8

   Enter the link text. Type in the text that you want to use as the link on which someone clicks. You’ll do this immediately after the closed HREF tag.

   • For example, if you want people to click on a link that says «click here», you’d have <a href=link>click here written.

9. 

   9

   Add the closed link tag. On the right side of the link text that you want to use, type in </a> and press ↵ Enter. This completes the link.

   • Your line of text should now look like this: <a href=link>click here</a>

10. 

    10

    Refresh your website. Once the website’s code is updated, you should be able to click the link that you just introduced to download the Word document.

Advertisement

Advertisement

Thanks for submitting a tip for review!