详解html实现在线预览word、excel、pdf等文件的功能(附代码)

htmledit_views-211130ba7a.css”/>

详解html实现在线预览word、excel、pdf等文件的功能(附代码)

详解html实现在线预览word、excel、pdf等文件的功能(附代码)

本文讲述了html是如何实现动态在线预览word、excel、pdf等文件的功能,该功能十分的方便,大家一起来看看吧,如有什么不足,还望大家指出。

通过iframe直接引用微软提供的方法


在 https://view.officeapps.live.com/op/view.aspx?src= 后边添加需要预览的内容

注意:链接包含中文需要进行URL编码,并且文档必须可在Internet上公开访问

官方使用文档

立即学习“前端免费学习笔记(深入)”;

详解html实现在线预览word、excel、pdf等文件的功能(附代码)

pdf在线浏览

PDF.js下载地址

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

使用方法

引入pdf.js文件

c

创建有个p用于展示

通过js动态添加需要浏览的pdf地址

 var options = {            height: "550px",            pdfOpenParams: {view: 'FitV', page: '0' },            name:"mans",            fallbackLink: "

您的浏览器暂不支持此pdf,请下载最新的浏览器

" };PDFObject.embed(url, "#example1",options);

预览效果

dc80301ee9bbf46a7c53872b73158d2.png

感谢大家的阅读,希望大家有所收益。

本文转自:https://blog.csdn.net/superKM/article/details/81013304

 推荐教程: 《HTML教程》

以上就是详解html实现在线预览word、excel、pdf等文件的功能(附代码)的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1548407.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 19:56:48
下一篇 2025年12月21日 19:57:01

相关推荐

  • html中字体如何实现加粗(方法介绍)

    htmledit_views-211130ba7a.css”/> html中字体如何实现加粗(方法介绍) 字体的修饰美化在一个网页的页面也是很重要的,美化的好的网页会给人带来直观的视觉冲击,今天我就来讲述以下在html中字体的加粗是怎么实现的,大家一起来看看吧。 字体加粗属性 .类…

    2025年12月21日
    000
  • html中如何设置超链接的样式

    设置超链接的样式示例: a:link 超链接被点前状态 a:visited 超链接点击后状态 a:hover 悬停在超链接时 a:active 点击超链接时 立即学习“前端免费学习笔记(深入)”; 在定义这些状态时,有一个顺序l v h a。 (推荐教程:html教程) 代码区: 无标题文档 a:l…

    2025年12月21日
    000
  • html中div标签有什么作用

    首先div是一个双标签,起始标签是 ,末尾标签是 中间可以添加文字、图片、以及其他标签,div可以包容一切所以一般都称他为盒子模型。 (视频教程推荐:html视频教程) 比如,我们在div中直接输入文字,或者标题标签,以及图片标签img 立即学习“前端免费学习笔记(深入)”; 然后将其保存预览的时候…

    2025年12月21日 好文分享
    000
  • 如何在html页面中插入视频

    video标签的使用 Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性, 以及一个内部使用的标签。Video标签内除了可以包含标签外,还可以包含当指定的视频都不能播放时,返回的内容。 (1) src属性和post…

    2025年12月21日
    000
  • 在html中用于设置页面元信息的标示符是什么

    在html中用于设置页面元信息的标示符是什么? 在html中用于设置页面元信息的标示符是Meta; (推荐教程:html入门教程) Meta元素 头元素包含着关于文档的概要信息。 立即学习“前端免费学习笔记(深入)”; HTML 同样包含位于 head 元素内部的 meta 元素。Meta 元素的作…

    2025年12月21日
    000
  • HTML中注释标记的基本语法是什么

    HTML中注释标记的基本语法是“”。 html注释代码开始是:以“”两个小横杠(减号)+大于符号。 示例: 这是一段普通的段落。立即学习“前端免费学习笔记(深入)”; 家电小商城网站源码1.0 家电公司网站源码是一个以米拓为核心进行开发的家电商城网站模板,程序采用metinfo5.3.9 UTF8进…

    2025年12月21日 好文分享
    000
  • HTML中如何创建新元素

    共有三种方法,如下所示: 一、通过text/HTML var txt1=”Text.”; 二、通过jQuery var txt2=$(“”).text(“Text.”); 三、通过JavaScript/DOM var txt3=document.createElement(“h3”);txt3.in…

    2025年12月21日
    000
  • XHTML与HTML的区别是什么

    结尾。 立即学习“前端免费学习笔记(深入)”; (相关视频教程推荐:html视频教程) 三、标签名称必须用小写字母 XHTML 规范定义:标签名和属性对大小写敏感。 四、XHTML 文档必须拥有根元素。 所有的 XHTML 元素必须被嵌套于 html> 根元素中。其余所有的元素均可有子元素。子…

    2025年12月21日
    000
  • html中图片怎么居中对齐?

    html中图片怎么居中对齐?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 图片的居中方式有很多种吧,算是html基础,下面给大家介绍几种方法。 div{width: 200px;height: 200px;border: 3px solid skybl…

    2025年12月21日 好文分享
    000
  • html里文字居中代码怎么写?

    html里文字居中代码怎么写?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 文字水平居中 水平居中.box {width: 300px;height: 200px;background: palegoldenrod;text-align:center;…

    2025年12月21日
    000
  • html中的空格代码是什么

    空格代码:   :一个字符的半角的不断行的空格,如果需要在网页中插入多个空格,可以将“ ”代码写多遍;   :一个字符的半角的空格,也可以将“ ”写多遍来插入多个空格;   :两个字符的全角的空格,也可以将“ ”写多遍来插入更多的空格;   :小于一个字符的空格; 立即学习“前端免费学习笔记(深入)…

    2025年12月21日
    000
  • html实现不显示表格边框线需要设置什么属性

    在html中,要使表格的边框不显示出来需要设置的属性是border。 表格边框是表格项目周围的直线,用于分开行、列和单元。默认情况下,是显示无边框表格的。 border=n,指定表格边框宽度的像素值,数字越大则越宽,0表示无边框。 (推荐教程:html教程) 以上就是html实现不显示表格边框线需要…

    2025年12月21日
    000
  • html字体颜色怎么设置

    html可以使用“color”属性设置字体颜色。 推荐学习:html入门教程 1、新建html文档,在body标签中添加p标签,然后在p标签中添加一些文字: 立即学习“前端免费学习笔记(深入)”; 2、在head标签中添加style标签,style标签的作用是为元素添加样式,然后在style标签中添…

    2025年12月21日 好文分享
    000
  • html实现点击直接下载文件

    1、使用标签 点击下载 这样当用户打开浏览器点击链接的时候就会直接下载文件。 但是有个情况,比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的,而是会直接打开文件,这个时候就需要给a标签添加一个属性“download”; (推荐学习教程:html入门教程) 实例如下: 立即…

    2025年12月21日
    000
  • html背景图片怎么全屏

    html背景图片怎么全屏 1、首先设置html和body的高度为100% 推荐学习:html教程 html,body{ width:100%; height:100%} 2、然后给body添加背景图片,并设置background-size为100%即可。 body{ font-family: “华文…

    2025年12月21日
    000
  • html实现高亮关键字

    正则优化一:仅处理位于标签内的元素 var formatKeyword = text.replace(/[-/^$*+?.()|[]{}]/g, ‘$&’) // 转义处理keyword包含的特殊字符,如 /.var finder = new RegExp(“>.*?”++”.*?&l…

    2025年12月21日
    000
  • html中标签该如何使用

    为什么需要使用标签? 在我们制作的网页中,要是想让它能够让更多的人去访问,最好的方法就是通过搜索引擎来找到你的网址,于是需要你的网页可以有关键词能够让搜索引擎来识别,于是HTML中的标签就是这个功能,将这个页面的关键信息写入去,让搜索引擎能够去识别,那么接下来就说一下如何去使用: mate (推荐教…

    2025年12月21日
    000
  • html搜索框怎么做

    html搜索框怎么做 使用HTML做搜索框的方法: 1、首先新建一个div,id名为box,用来包裹搜索框; 2、然后在内部添加一个input标签和一个div标签,一个用来输入文字,一个充当按钮; 3、最后使用css为它们设计样式即可。 推荐学习:html教程 Examples #box{ widt…

    2025年12月21日
    000
  • 关于html中area标签的用法详解

    标签 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。 area 元素总是嵌套在 标签中。 (推荐教程:html教程) 注: 标签中的 usemap 属性与   元素 name 属性相关联,创建图像与映射之间的联系。 中的 usemap 属性可引用 中的 id 或 name 属性…

    2025年12月21日
    000
  • 如何在html页面中实现查找功能

    前台效果: html 查找: 相关教程推荐:html教程 js 立即学习“前端免费学习笔记(深入)”; //搜索功能 var oldKey0 = “”; var index0 = -1;var oldCount0 = 0; var newflag = 0; var currentLength = 0…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信