前端网页预览word,pdf,excel等各类文档

最新推荐文章于 2024-09-30 15:40:17 发布
最新推荐文章于 2024-09-30 15:40:17 发布
阅读量3k 收藏 11
点赞数
分类专栏： html js 文章标签： 预览word
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iorn_mangg/article/details/102898424
版权
js 同时被 2 个专栏收录
7 篇文章 0 订阅
订阅专栏
html
4 篇文章 0 订阅
订阅专栏

项目中有需求要在网页上预览word文档，但是使用a标签的话只能预览图片一类的文件，对word只会下载文档不能预览

在网上查了很多资料，有些方法只能支持ie（使用ActiveXObject）

终于发现有一款插件XDOC可以实现预览的功能：

只需要引入

<script type="text/javascript" src="http://www.xdocin.com/xdoc.js"></script>

然后使用a标签，href添加

http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=加上自己文件的地址，就能实现预览了

另外office好像也提供了类似的方法，但我没有去研究，用过的小伙伴可以给我说说，哈哈哈哈

iorn_mangg
关注
专栏目录
vue 监听数值的变化，并捕捉到
macangyewangs的博客
04-19 1851
上传头像的例子是完整的，登录没全部展示 1. 封装全局监听方法：在main.js中给引入watchsessionStorage（可以放多个函数）。约定监听的sessionStorage的值为"dialogLogin"，“avatarUrl”，然后创建StorageEvent方法，当执行sessionStorage.setItem(k, val) 时，初始化事件，并派发事件 //用于登录判断是否有token export function resetSetItem(key, newVal) { if
vue watch监听数据变化
qq_68862343的博客
07-03 1175
监听数据变化，在Vue中是通过侦听器来实现的，你也可以将它理解为监听器，时刻监听某个数据的变化。
前端实现在线预览excel文件
最新发布
burgessbin的博客
09-30 1905
微软Office服务的优缺点利用微软的强大服务，稳定性和兼容性较高。提供丰富的功能，如编辑、批注等。需要用户具有微软 Office 订阅或者在特定环境下使用，限制了其适用性。可能存在性能问题，特别是对于大型文件。LuckyExcel、Luckysheet的优缺点、开源免费，无需用户具有特定的订阅。可以自定义显示和功能，灵活性较高。缺点可能需要一些额外的配置和调试。功能可能不如微软 Office 服务丰富。
【进阶4-1期】详细解析赋值、浅拷贝和深拷贝的区别
weixin_34248849的博客
12-24 213
一、赋值（Copy） 赋值是将某一数值或对象赋给某个变量的过程，分为下面 2 部分 基本数据类型：赋值，赋值之后两个变量互不影响 引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有影响 对基本类型进行赋值操作，两个变量互不影响。 // 木易杨 let a = "muyiy"; let b = a; console.log(b); // muyiy a = "change"...
Vue watch中监听值的变化，判断后修改值
热门推荐
weixin_44524835的博客
08-20 1万+
计数器有最小值与最大值的限制，且中间的文本输入框可自己输入值。 实现方式是在watch中监听文本输入框绑定的v-model，跟最大最小值比较后，如果有需要，则改变值。 <mu-text-field v-model.number="weightNum" solo full-width ></mu-text-field> watch: { //监听用户输入的重量值 //如果超过最大重量，弹出提示，并且将输入框重量置于最大值 .
vue：引用传递参数值，更改其中一个变量值,另一个变量值同步改变
欢迎来到我的CSDN技术博客！这里是一个专注于编程技术深度交流与分享的乐园。作为一名热衷于探索和实践的技术爱好者，我致力于将自己在前端开发、后端架构、移动端应用（包括微信小程序、抖音小程序、UNI-APP开发）、以及APP开发领域的宝贵经验与心得，无私地分
02-19 2163
vue 引用传递而不是值传递，两个变量指向的是同一个内存地址。 let data = ['测试1','测试2']; this.typeList = data; data.unshift('全部'); console.log(this.typeList); //typeList 值为 ['全部','测试1','测试2'] 可以使用以下2种办法避免该问题 解决办法1： let data = res.data; this.typeList = data.map((o)=>{return o;
以html形式显示或预览word，excel，pdf，txt
10-08
在IT行业中，尤其是在Web开发领域，常常需要处理各种类型的文档，如Word、Excel、PDF和TXT等。这些文件格式在日常工作中广泛使用，但它们在Web浏览器中的直接展示并不直观，用户通常需要下载文件到本地然后打开。...
纯前端文档预览，Vue实现，无需后端，支持Word、Excel、PPT、pdf、文本、图片，附接入demo和文档
02-09
纯原创资源，盗用必究，仅用于学习和交流，持续更新，...3. 支持所有文本、代码格式，所有主流图片格式，.mp4，.docx，.xlsx，.pptx, .pdf等主流文档格式的纯前端预览 4. 附带接入demo，使用纯js实现，可以用于任何场景
亲测，以html形式显示或预览word，excel，pdf，txt
05-24
在IT行业中，以HTML形式显示或预览不同的文档格式，如Word、Excel、PDF和TXT，是一种常见的需求，尤其在Web应用中。本项目提供的源码着重于ASP.NET后台处理，利用特定的类库将这些文件转换为HTML，以便前端能够以...
前端实现文档在线预览(word、excel、pdf)
02-08
本篇文章将详细探讨如何在前端实现文档在线预览，主要针对Word、Excel和PDF这三种常见格式。 1. **PDF预览**： - **PDF.js**: Mozilla提供的开源库PDF.js是实现PDF在线预览的首选工具。它能够解析PDF文件，并将其...
VUE 监听对象中某一个属性的变化
alokka的博客
12-16 2877
第一种 直接监听对象的属性，写法如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <di
Vue页面监听数据变化
codezha的博客
07-19 2796
最近开发遇到这样一种情景，某个页面需要根据路由query查询参变化执行对应的操作，放在生命周期钩子函数里面都不太合适，因为生命周期钩子函数是针对组件的不是针对页面的，所以需要通过watch监听路由query查询参的变化，代码如下： watch: { '$route.query': { if (this.$route.query.xx) { //根据xx参数值的情况，执行对应的操作.... } }, deep: true } ...
vue中修改路由参数和监听路由参数的变化
初辰的博客
11-03 412
vue中修改路由参数和监听路由参数的变化 不跳转页面修改路由参数 this.$router.push({ query: { keyword: this.keyword } }) 监听路由参数的变化 watch: { $route: { handler () { console.log(this.$route.query.keyword); }, deep: true } }, ...
前端页面预览word_jquery word 在线预览 jquery word预览插件
weixin_36390615的博客
01-15 4529
用jquery插件实现pdf文件的在线预览,大概是怎么个思路其实也就是简单的在浏览器中实现一个打开pdf文件，并有类似预览功能的边框。其实在中国上经常见到类似的页面，在浏览器中打开pdf文档，可大部分都是由于版权的原因使用了一些很特殊的技术，自然很难模仿了。即使有直接在浏览器打开的例子，也必须手动点击一下链接然后才能打开pdf文件。如何直接打开，而不用点击链接呢？本以为自己对js很熟，也就使用js...
IE浏览器使用js展示word
weixin_42720384的博客
06-16 223
第一种： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script language="Javascript"> function doword() { var WordApp = new ActiveXObject("Word.Application"); WordApp.Ap
vue 开发技巧学习笔记
qq_38388578的博客
04-16 130
1、watch高阶使用 1-1、立即执行 watch是在监听属性改变时才会触发，有些时候，我们希望在组件创建后watch能够立即执行 可能想到的的方法就是在create生命周期中调用一次，但这样的写法不优雅，或许我们可以使用这样的方法 export default { data() { return { name: Joe } }, watch: { name: { ...
参考alist文件预览服务
weixin_43026613的博客
09-20 742
2023-05-01之后创建的项目使用WebOffice进行文档预览和在线协作按接口调用次数计费，调用。
PE头打印
qq_41232519的博客
09-22 541
文章目录 一、GetLogicalDrives() #include <windows.h> DWOR dwtLogicalDrives = GetLogicalDrives(); //返回一个数字 13 1101 1为存在，0为不存在，从右到左 ，A存在，B不存在，C存在，D存在
前端技术实现word、excel、pdf文档在线预览方法
对于Word文档，前端预览较为复杂，因为Word文档格式相对复杂，包含了大量的样式和格式信息。目前较为流行的方法是利用Office Online提供的API服务，通过在网页中嵌入一个iframe，将需要预览的Word文件上传到Office ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值