How to display PDF, word, xls and PPT in HTML

How to display PDF, word, xls and PPT in HTML

Time：2020-9-4

1. Pdf file online preview

1. HTML5 new tag < embed > definition and usage

The < embedded > tag defines the embedded content. The tag is self closing. That is to say, if the browser does not support PDF embedding, the content of the tag will not be visible.

example

< embedded SRC = / file / operation manual. PDF “type =” application / PDF “width =” 100% “height =” 100% “/ >

2.<iframe>

The < iframe > method is one of the simplest ways to embed PDF. However, if the < iframe > browser does not support PDF rendering, it may not be able to provide enough backup content.

example

< iframe SRC = your PDF address "width =" 100% "height =" 100% "> 　　This browser cannot support PDF, please click to view: 　　Download PDF</a> </iframe>

3.<object>

Unlike < embed >, < Object > prompts content if the browser does not support PDF embedding. All browsers support the < Object > element, but there are often differences in how they are implemented in each browser. If you use the < Object > element, be sure to thoroughly test your page in your browser and operating system.

example

< object data() / file / operation manual. PDF "type = Application / PDF" width = 100% "height = 100%" > the This browser does not support PDF. Please click to view: Download PDF < / a ></p> </object>

2. Word, xls, PPT online preview

Word, PPT and XLS files are relatively simple to realize online preview, which can be realized directly by calling Microsoft’s online preview function (preview premise: resources must be publicly accessible)

<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'> </iframe>

SRC is the file address to implement preview

Add: Google’s document online preview implementation is the same as Microsoft’s (resources must be publicly accessible), but need to go over the wall

<iframe src="https://docs.google.com/viewer?url=fileurl"></iframe>

3. Xdoc online preview

Xdoc can preview DOC documents represented by datauri. In addition, xdoc can also realize online preview of text, text with parameters, HTML text, JSON text, official documents, etc. for specific implementation methods, please refer to the official documents

The following method can quickly preview word, but there may be some restrictions on the editor used for the file

<a href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=http://www.xdocin.com/demo/demo.docx" target="_blank" rel="nofollow">XDOC</a>

This article about html display PDF, word, xls, PPT method example article introduced here, more related HTML display PDF, word, xls, PPT content, please search the previous articles of developeppaer or continue to browse the related articles below, I hope you can support developeppaer more in the future!

Tags: html, pdf, ppt, word, xls