How to Embed Microsoft Word and Excel Documents in HTML Web Page

by | Apr 6, 2022 | PHP, React

In this article, we show how to Embed Microsoft Word and Excel Documents on an HTML Web Page. It is an easy and effective way to embed a Microsoft Excel and Word file on an HTML web page is to use the API provided by Microsoft and display excel/word documents right on your website browser. The Microsoft Office embed and display word and Excel file types (.doc, .docx, .ppt, .pptx, .xls, .xlsx) in HTML web page.

The iframe tag creates an inline frame. It is used to display a web page in HTML. Iframe tag is embedding third-party content in excel, word, media, etc.

How to Embed PDF Document in HTML Web Page

Create Office Web Viewer Link: 

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

 

  • Microsoft office embed excel format in HTML web page – (xls/xlsx).
  • Microsoft office embed word format in HTML web page – (doc/docx).
  • HTML web page display the file format like – .doc/.docx/.xls/.xlsx.

Embed Excel and Word File in HTML Web Page

The code to embed Excel document on this HTML web page is shown below 

 Excel  
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=https://codeat21.com/wp-content/uploads/2022/04/sample_XLSX_file.xlsx' width='100%' height='650px' frameborder='0'></iframe>

The code to embed Word document on this HTML web page is shown below 

 Word  
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=https://codeat21.com/wp-content/uploads/2022/04/sample_docx_file.docx' width='100%' height='650px' frameborder='0'></iframe>
 Index.html 
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Embed Microsoft Word and Excel Documents in HTML Web Page by CodeAT21</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
	.embeded{display:flex;}
	.cols{width:50%;}
</style>
</head>
<body>
<div class="container">
	<div class="embeded">
		<div class="cols">
			<h2> Embed MS word file </h2>
			<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=https://codeat21.com/wp-content/uploads/2022/04/sample_docx_file.docx' width='100%' height='650px' frameborder='0'></iframe>
		</div>
		<div class="cols">
			<h2>Embed MS excel file </h2>
			<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=https://codeat21.com/wp-content/uploads/2022/04/sample_XLSX_file.xlsx' width='100%' height='650px' frameborder='0'></iframe> 
		</div>
	</div>
</div>
</body>
</html>

How to Embed PDF Document in HTML Web Page

Related keywords

  • How to Link or Embed Excel Files in Word Documents
  • How to Embed PDF, Spreadsheet, and others in WordPress Blog Posts
  • Embed an Excel Worksheet in a Word Document (In Easy Steps)
  • Responsive google sheet embed.
  • How do I embed HTML in a Word document?
  • Embed Images-Signatures in Word-Excel-PowerPoint
  • How to Embed a Word Document Into a Website
  • Embed web content in Word for the web
  • How to Embed an Excel File on a Web Page using plain HTML
  • How to Link or Embed Excel Files in Word Documents
  • Display word document in html page using javascript
  • How to preview a word document in HTML using javascript
  • How do I render a Word document (.doc, .docx) in the browser using JavaScript?
  • How to view Word document in browser using JavaScript
  • Preview MS Word docx Document in Browser
  • How to open a word document in javascript when clicked on a link
  • Open Word document in browser instead of download
  • Embed Word document in HTML iframe
  • JavaScript Office document viewer
  • how to display word document in my html page
  • How do I embed a word document in html5 website?
  • An Easy Way to Embed Word in a Web Page
  • Ameica, US, UK, United State, Newyork, United Kingdom, France, Germany, Itally, canada, England