vue预览 pdf、word、xls、ppt、txt文件方法

最新推荐文章于 2025-03-29 10:20:12 发布
最新推荐文章于 2025-03-29 10:20:12 发布
阅读量2.4w 收藏 186
点赞数 61
分类专栏： vue js 文章标签： vue word 预览 文件 pdf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/genziisme/article/details/118056045
版权

首先说下为什么要分享：特么的，网上教的都是特么的啥玩意！！！真特么垃圾，各种方法说不到点子上！！！真是特么气死我了！还有那群只会复制粘贴的帖子狗！妈的，自己都不做测试就会复制粘贴别人的，然后就发出来误人子弟，我真是醉了！

上方法：

1. 在页面内加个 iframe ，src地址即为要展示的文件地址

这里我用的是 elementui ，你们如果用其他的也是用iframe就得了

2. word、xls、ppt这些文件要用 微软官方的预览地址

注意：1. 文件地址必须公网；2. 静态资源不要有访问权限

最后，你控制的只是src地址

微软解析地址：https://view.officeapps.live.com/op/view.aspx?src=你的文件地址

这里我只是控制了 imgVisbleURL 变量 然后 iframe的src就取的这个变量的 地址

3. 最终效果

（1）txt

（2）word、xls、ppt

（3）pdf

【Vue】在vue3中实现pptx、word、excel预览
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-12 7192
/设置excel网络地址，可以是相对地址。//引入VueOfficeExcel组件。//引入VueOfficeDocx组件。//设置ppt网络地址，可以是相对地址。具体方法你怎么写都能，只要你能获取到。//设置文档网络地址，可以是相对地址。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 4307
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
纯前端文档预览，全网支持最全，Vue实现，无需后端，支持Word、Excel、PPT、pdf、文本、图片，附接入demo和文档，新增支持doc, xls文件
02-09
效果预览： https://viewer.flyfish.dev 纯原创资源，盗用必究，仅用于学习和交流，持续更新，可私信了解。 1. 整合目前市面上所有的纯前端Web组件，并二次开发改进稳定性 2. 目前最灵活的接入方案，基于Html5 postMessage传送blob数据，高度解耦 3. 支持所有文本、代码格式，所有主流图片格式，.mp4，.docx，doc，.xlsx，xls，.pptx, .pdf，.md 等主流文档格式的纯前端预览 4. 附带接入demo，使用纯js实现，可以用于任何场景 注意，本代码完全原创，2022年就已经推出，版权所有，后续出现的开源项目大都借鉴本项目思路。本项目支持度是全网最广的，可以详细了解。 本源码包已经更新，请放心下载，包括vue2和vue3版本以及demo，需要更多支持，请注册https://git.flyfish.dev，获得代码的持续更新。 有问题欢迎联系微信 Yous_Gift。
前端实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）
04-21
前端实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）
vue3文件预览功能，本地及非公网文件预览，文件流预览
最新发布
qq_42816138的博客
03-29 1219
docx、.xlsx、pdf、txt,、video、audio文件预览
vue 实现 word/excel/pdf 等文件格式预览操作
weixin_50450473的博客
07-12 1万+
/docx、excel、pdf文档预览组件，vue-office插件，其中docx文档预览是通过对docx-preview插件的二次封装，docx-preview插件不支持doc格式文件；docx文档预览是对exceljs插件的二次封装。希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~有文件大小限制，超过要收费！
vue预览 pdf、word、xls、ppt、txt、csv文件方法
MISS_zhang_0110的博客
05-10 3064
word、xls、ppt、pdf 这些文件要用 微软官方的预览地址。注意：1. 文件地址必须公网；2. 静态资源不要有访问权限。
vue 预览pdf、word、Excel、ppt
热门推荐
qq_一望损莓苔的博客
09-29 1万+
转载地址：https://blog.csdn.net/weixin_44326007/article/details/99693479 最近写了个有 预览word 、Exce、ppt以及pdf文件 的后台 管理 在网上也找了 很多 就感觉很复杂 ，当然最后还是实现了 ， 本博主一项喜欢简单 越简单越好 越好理解 废话不多说 先上效果图 （我就喜欢那种有图的代码 能预览一下是不是自己想要的效果）...
vue预览txt
reembarkation的博客
09-07 1746
vue 预览txt,预览本地文件和接口数据流
vue 实现 word/excel/ppt/pdf 等文件格式预览操作
_NIXIAKF的博客
06-27 1897
vue 实现 word/excel/ppt/pdf 等文件格式预览操作
vue3中实现txt格式文件预览(纯前端)
时清云的博客
11-20 4434
在平常的工作当中，已经会遇到文件上传后需要预览的功能，比如docx,doc,xls,xlsx,ppt,pdf,txt,图片,视频等格式的文件，其实也可以让后端人员写接口解析，本着不想麻烦别人的心态，能自己解决的绝不麻烦别人，这里简单介绍txt,docx,xlsx,mp4文件预览。
vue笔记.txt
07-14
1.v-on用于绑定dom事件 简写 @ ,v-on:click="handleClick"/@click="handleClick" v-bind用于绑定html属性， 简写 ： ，v-bind:content="item"/:content="item" 2.组件 component 全局组件 Vue.component("TodoItem",{ //props:['content'], //props:{ content:{ type:[String,Number], require:false, default:'my street', validator:function(value){ return (value.length>5) } } } data:function(){ return{ why:'子组件数据为一个函数' } } template:"{{content}}" }) 局部组件 var TodoItem = { props:['content'], template:"{{content}}" } 给组件绑定原生事件 动态组件 标签
vue 预览 txt
cmmboy1990的博客
06-21 1102
vue 预览 txt 1.核心代码 <!-- --> <template> <div class=''> <van-nav-bar title="预览txt" left-text="返回" left-arrow class="title" @click-left="onClickLeft"
vue3+PPTXjs 在线ppt预览
徐同保的专栏
09-30 3938
vue3+PPTXjs 在线ppt预览
vue前端无需插件实现网页在线预览pdf、xls、xlsx、ppt、jpg等多格式文件
iseyre的博客
04-14 1385
你的文档地址必须是外网可访问的并且是http或https打头。给预览按钮方法中加上这段代码。
vue3 文件流预览常见文件(xls,xlsx,ptf,txt,img,excel)
tao20010624的博客
06-11 4498
PPT格式转换可能会跟vue的 Object.defineProperty()方法冲突。如果是vue2.6版本或以下还需要额外安装 @vue/composition-api。
vue实现在线预览pdf,word,excel,ppt等office文件
Boy的博客
07-01 1256
1.只需要使用<ifreme>标签就能实现。5.样式自己可以在iframe调节。
vue 2使用vue-office/iframe/PPTXjs 实现预览xls/xlsx/docx/pdf/pptx/txt
qq_39498157的博客
05-21 6145
vue 2使用iframe/vue-office/PPTXjs 实现预览xls/xlsx/docx/pdf/pptx/txt
vue3实现word，excel，pdf，mp3，mp4，ppt，txt文件预览
weixin_45449046的博客
03-10 5808
vue3实现word，excel，pdf，mp3，mp4，ppt，txt文件预览
Vue预览xls,xlsx文件
07-28
你可以使用第三方库如`xlsx`来处理和预览xls和xlsx文件。以下是一个使用Vue和xlsx库预览文件的示例： 首先，安装`xlsx`库： ```bash npm install xlsx ``` 然后，在Vue组件中引入和使用`xlsx`库： ```vue <template> <div> <input type="file" @change="handleFileUpload" accept=".xls,.xlsx"> <table v-if="data"> <thead> <tr> <th v-for="cell in data[0]">{{ cell }}</th> </tr> </thead> <tbody> <tr v-for="(row, index) in data.slice(1)"> <td v-for="cell in row">{{ cell }}</td> </tr> </tbody> </table> </div> </template> <script> import XLSX from 'xlsx'; export default { data() { return { data: null, }; }, methods: { handleFileUpload(event) { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = (e) => { const data = new Uint8Array(e.target.result); const workbook = XLSX.read(data, { type: 'array' }); const worksheet = workbook.Sheets[workbook.SheetNames[0]]; const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); this.data = jsonData; }; reader.readAsArrayBuffer(file); }, }, }; </script> ``` 这个示例中，我们创建了一个文件上传的输入框，并监听其`change`事件。当用户选择文件后，我们使用`FileReader`读取文件内容，并将其转换为`Uint8Array`类型。然后，我们使用`XLSX`库的`read`方法将文件内容解析为工作簿对象，并获取第一个工作表的数据。最后，我们使用`XLSX.utils.sheet_to_json`方法将工作表数据转换为JSON格式并赋值给`data`属性，以在模板中显示。 请注意，这只是一个简单的示例，你可能需要根据自己的需求进行适当的修改和扩展。
评论 45
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值