HTML implements online file preview function (detailed graphic and text explanation)

烟雨青岚
Release: 2020-06-16 16:53:11
forward
10317 people have browsed it

HTML implements online file preview function (detailed graphic and text explanation)

html implements online file preview function (detailed graphic and text explanation)

Word excel pdf table online browsing

Directly reference the method provided by Microsoft through iframe

<iframe src=&#39;https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls&#39; width=&#39;100%&#39; height=&#39;100%&#39; frameborder=&#39;1&#39;>
			</iframe>
Copy after login

Add the content that needs to be previewed after https://view.officeapps.live.com/op/view.aspx?src= Content

Note: Links containing Chinese need to be URL encoded, and the document must be publicly accessible on the Internet

Official use document

pdf online viewing

PDF.js download address

http://jhyt.oss-cn-shanghai.aliyuncs.com/images/1531367199089_PDFObject.js

Usage method

Introduce the pdf.js file

<script src="./js/PDF/PDFObject.js" type="text/javascript"></script>c
Copy after login

Create a p for display

<p id="example1"></p>
Copy after login

Dynamically add the content that needs to be browsed through js PDF address

 var options = {
            height: "550px",
            pdfOpenParams: {view: &#39;FitV&#39;, page: &#39;0&#39; },
            name:"mans",
            fallbackLink: "<p>您的浏览器暂不支持此pdf,请下载最新的浏览器</p>"
        };
PDFObject.embed(url, "#example1",options);
Copy after login

Preview effect

HTML implements online file preview function (detailed graphic and text explanation)

Thank you for reading, I hope you will benefit a lot.

This article is reproduced from: https://blog.csdn.net/superKM/article/details/81013304

Recommended tutorial: "HTML Tutorial"

The above is the detailed content of HTML implements online file preview function (detailed graphic and text explanation). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template