html 实现动态在线预览word、excel、pdf等文件(方便快捷)

article/2025/8/25 14:13:08

亲测可用,若有疑问请私信

word+excle+pdf表格在线浏览

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

<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>
在 https://view.officeapps.live.com/op/view.aspx?src= 后边添加需要预览的内容

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

官方使用文档

https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/?eu=true

pdf在线浏览

PDF.js下载地址

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

使用方法

引入pdf.js文件

<script src="./js/PDF/PDFObject.js" type="text/javascript"></script>c
创建有个div用于展示

<div id="example1"></div>
通过js动态添加需要浏览的pdf地址

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


 


http://chatgpt.dhexx.cn/article/Z85c8JEF.shtml

相关文章

php实现在线预览word等office文件,同时添加水印

最近需要在网页上实现预览上传的word文档&#xff0c;并能在预览中添加自己的水印&#xff0c;之前没有实现过相关功能&#xff0c;搜索了一下网上的资料&#xff0c;清晰完整的教程较少&#xff0c;因此将自己实现的步骤和遇到的问题记录下来&#xff0c;希望能帮到有需要的人…

vue 在线预览word、excel、pdf、txt、图片

excel文件预览 word文件预览 pdf文件预览 普通图片预览 一、查看word 引用mammoth.js 安装 npm install --save mammoth 引入import mammoth from “mammoth”; 1.页面 <div id"wordView" v-html"vHtml"/></div> 2.数据 data() {return {vHtml…

前端实现Word在线预览

因为项目需要&#xff0c;要实现在浏览器端在线预览word文档&#xff0c;根据文档url动态预览文件内容。因为浏览器不支持word格式。所以在浏览器端语言word的方法也就有以下几种。 转为pdf&#xff0c;然后预览 因为浏览器支持pdf预览&#xff0c;这种方法也不错&#xff0c…

uniapp h5在线预览word文档ppt等

1.要预览文档服务首先开启服务 &#xff08;1&#xff09;登录 数据万象控制台 &#xff0c;单击存储桶管理&#xff0c;进入存储桶管理页面。 &#xff08;2&#xff09;在存储桶管理页面选择并单击需操作的存储桶&#xff0c;进入相应存储桶管理页面。 &#xff08;3&#xf…

php怎么在线预览word文件?php预览.doc、.docx、.wps文件

php预览Word PHP要实现在线Word预览只需要3步 第一步&#xff1a; 准备一个文件地址&#xff0c;如下&#xff1a; http://usdoc.cn/vw/文件模板.docx 第二步 预览前置地址&#xff1a; http://vw.usdoc.cn/?src 第三步 开始预览 http://vw.usdoc.cn/?srchttp://usdoc.cn/vw/…

Vue在线预览word

先上效果图 下载插件 npm i docx-preview0.1.4 npm i jszip 完整代码 <template><div class"app"><el-button click"preview">预览</el-button><el-dialogv-if"previewShow"title"预览":visible.sync&q…

前端实现在线预览Word文件

简介 在项目中遇到了个需求&#xff0c;大致需求这样的&#xff1a;用户在上传文件前需要先预览一下内容&#xff0c;确认内容是否正确&#xff0c;正确的情况下才可以上传&#xff1b; 那么这里面会涉及到一个在上传前的文档的预览操作&#xff0c;下面就记录一下踩坑记录 d…

前端实现在线预览word(docx),pdf,excel类型的文件

实现方案 找了网上的实现方案&#xff0c;效果看起来不错&#xff0c;放在下面的表格里&#xff0c;里面有一些是可以直接通过npm在vue中引入使用。 文档格式老的开源组件替代开源组件word&#xff08;docx&#xff09;mammothdocx-preview(npm)powerpoint&#xff08;pptx&a…

word文档创建及在线预览方法

工作中经常有时会遇到需要给用户创建word文档并实现word文档在线预览 的需求,我来讲一讲我所知道的解决方案。 一、word文档模板定义 因word文档中内容是根据不同用户显示不一样,所以需要使用较为灵活的模板了,本文使用的是freemarkerxml来定义模板: 1. maven依赖: <depe…

自学Java没学历可以找到工作吗?

除非技术真的diao 炸 天&#xff0c;否则大概率是找不到的 低学历能自学编程的人大有人在&#xff0c;你在搜索引擎上一查&#xff0c;低学历自学编程改变自身命运的不胜枚举。 但无一不例外的&#xff0c;每个求学者的叙述都透漏着心酸、艰难困苦&#xff0c;披荆斩棘。这些词…

自学Java真能找到好工作吗

最近跟学生沟通的时候总是能听到这样的对话 学生&#xff1a;老师&#xff0c;我觉得没必要报个班学习Java&#xff0c;我有好多师兄现在都在自学的&#xff0c;我觉得他们学的也挺不错的&#xff0c;没有想象的那么难&#xff0c;我也准备自学了&#xff01; 老师&#xff1…

自学编程到底多难?能不能找到工作?阿里技术专家这样回答……

最近逛知乎&#xff0c;看到一个问题&#xff0c;有感而发&#xff0c;原问题如下&#xff1a; 想自学编程恳请大神推荐app网站&#xff01;? 数学不好&#xff0c;再从小学数学开始重修 想学习编程&#xff0c;请问各位大神 1、编程要求哪方面数学知识&#xff1f; 2、有…

自学Java真的可以找到工作吗?

就java得市场而言&#xff0c;不管自学还是科班找到工作都不是很难。当然&#xff0c;自学的话&#xff0c;首先要解决的是自制力的问题&#xff0c;如果没有自制力&#xff0c;也就没有了恒心&#xff0c;学不了东西&#xff0c;自然也找不到工作。 其次&#xff0c;java发展…

java能自学吗_java能自学吗?

java能自学吗&#xff1f; Java是一门面向对象编程语言&#xff0c;不仅吸收了C语言的各种优点&#xff0c;还摒弃了C里难以理解的多继承、指针等概念&#xff0c;因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表&#xff0c;极好地实现了…

自学编程5个月找到了月薪12K的工作,我的方法值得大家借鉴

昨晚在刷知乎的时候&#xff0c;突然跳出了字节发来的录用邮件&#xff0c;期待了很久offer&#xff0c;最大的感受就是这5个月的编程自学没有白费。 高中对编程很感兴趣&#xff0c;但是一边搞主课一边自学编程导致高考没考好&#xff0c;编程也没学出什么苗头。于是选择了一个…

自学java到可以找工作要多久_自学编程需要多久才能找到工作?

自学编程需要多久才能找到工作&#xff1f; 很多编程初学者都会有这种疑问&#xff0c;自学学到什么程度或者学多久能够找到工作&#xff0c;这种问题没有统一答案&#xff0c;因为每个人的出发时候的基础以及在学习过程中掌握的程度不尽相同&#xff0c;也会导致结果不一样&am…

自学java能找到工作吗?公司会要吗?

java是一门面向对象编程语言&#xff0c;它不仅仅吸收了C语言的各种优点&#xff0c;还摒弃了C语言当中很难理解的多继承、指针等概念&#xff0c;所以&#xff0c;java语言具有着功能简单、简单易用这两个特征。 java学习起来还是非常的简单的&#xff0c;现在有很多的人都会自…

零基础自学编程的程序员如何找到工作

现在很多年轻人喜欢计算机,喜欢软件开发,想从事IT行业但又不是学这个专业的,很多人就想通过自学的途径走上这条道路,但大家肯定也和我当初一样有很多的困惑。本人学校学的是国际贸易专业,毕业之后的不顺利加上自身的兴趣爱好,走上编程的道路,下面就结合亲身经历说说自己…

自学单片机能找到工作吗?能有出路吗?

你现在的情况跟我十年前很像啊&#xff0c; 或许我当时的情况比你现在还糟一些。 我们是电气工程毕业的&#xff0c;第一年学了一些电气相关的知识&#xff0c;后面几年学校给我们安排的全是电梯的课程。 我和很多人的想法一样&#xff0c;电梯还需要开专业的课程&#xff1f…

配置Nginx端口

一、起因 昨天晚上闲来无事,上了下阿里云发现自己的域名和服务器都还没过期,所以就把自己的域名绑定到服务器地址上,做了一个DNS解析。但是我发现,每次需要访问8888端口时仍需要使用 域名:8888 这种方式访问,所以我想用Nginx做一个反向代理,将默认打开的80端口转发到808…