先上效果图
插件安装
先说 word 文件是docx-preview插件
excel文件是用xlsx 插件
介绍后端返回的数据
因为在拦截器处 做了对数据的处理 最后你调接口拿到的数据是 一个对象 里面包含:
url :blob对象转换的用于访问Blob数据的临时链接。这个链接可以被用于在网页中展示二进制数据，比如显示图像或者播放音视频文件
blobs:返回的Blob对象，代表了从网络请求中获取到的二进制数据
这上下俩部分很重要!!!!!!!!
如果返回的普通格式的话就大家直接转化
-
const blob = new Blob([res], { type: ‘application/pdf’ }) //你需要的类型 转化为blob对象
-
const url = window.URL.createObjectURL(blob) //将对象转化为链接
也就是你后面掉接口返回的数据
给大家打印一下 我当时在网上搜索这类资料的时候 就是在这一部分弄糊涂了 对数据格式不了解
然后就到正式书写了
下载引入插件 (我这是v3 引入 vue2版本 csdn官网上搜vue预览文件 一大堆 大家自己搜一下)
//word文档注释
import { renderAsync } from 'docx-preview';
//excel注释
import * as XLSX from "xlsx";Word预览
不清楚result 返回内容的往上滑 这里传递的是blob对象!!
//js代码处
const previewContainer = document.getElementById('fileShow');
renderAsync(result.blob, previewContainer) //渲染Excel预览
不清楚result 返回内容的往上滑 这里传递的是blob对象!! 中间内容是在拿到数据渲染的时候插件数据处理 最后将处理的数据当参数传递到处理样式的方法中
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net//js代码处 //表格预览所需数据 定义 const data = reactive({ excel: { // 数据 workbook: {}, // 表名称集合 sheetNames: [], // 激活项 sheetNameActive: "", // 当前激活表格 SheetActiveTable: "" } }) const { excel } = toRefs(data); // 视频预览所需数据 const emptyTips = ref('暂无内容'); //格式为excel时 方法中书写的内容 const reader = new FileReader(); //创建了一个FileReader对象，这个对象用于异步读取文件内容 //通过readAsArrayBuffer将blob转换为ArrayBuffer对象 reader.readAsArrayBuffer(result.blob) // 这里的res.data是blob文件流 reader.onload = (event) => { // 读取ArrayBuffer数据变成Uint8Array var data = new Uint8Array(event.target.result); // 这里的data里面的类型和后面的type类型要对应 var workbook = XLSX.read(data, { type: "array" }); const sheetNames = workbook.SheetNames // 工作表名称集合 excel.value.workbook = workbook excel.value.sheetNames = sheetNames excel.value.sheetNameActive = sheetNames[0] //方法 getSheetNameTable(sheetNames[0]) }; //定义的方法 const getSheetNameTable = (sheetName) => { try { // 获取当前工作表的数据 const worksheet = excel.value.workbook.Sheets[sheetName] // 转换为数据 1.json数据有些问题，2.如果是html那么样式需修改 let htmlData = XLSX.utils.sheet_to_html(worksheet, { header: '', footer: '' }) htmlData = htmlData === '' ? htmlData : htmlData.replace(/' } }
pdf 预览
这个需要用到iframe标签 他的blob对象的type需要是"type": "application/pdf" 大家可以看一下自己的blob对象 如果是后端返回的直接是blob格式 但是type不对 那等下我下面代码有转化 如果返回的普通数据 大家自己根据上面的格式自己转化blob对象的时候自己设置一下type
//js代码处 //格式为pdf时 const reader = new FileReader(); reader.readAsArrayBuffer(result.blob); reader.onload = function () { fileAddress.value = URL.createObjectURL(new Blob([reader.result], { "type": "application/pdf" })) }最后是jpg png ,mp4格式预览
//这里就用到blob对象转化的链接了 注意区分!! if (type == 'jpg' || type == 'png' || type == 'mp4') { fileAddress.value = result.url } //图片类型展示//视频类型展示
下载文件 !!
下载 // 文件下载 const DownloadFn = () => { let a = document.createElement('a') // 下载链接 a.href = blobUploadValue.value //这个就是那个blob链接!! // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf' //这里是你上传的文件名 加上他的类型 jpg,png,docx..... a.download = fileNameValue.value + '.' + fileType.value document.body.appendChild(a) // 点击a标签，进行下载 a.click() // 移除元素 document.body.removeChild(a) }最后是完整代码
![]()
该文件暂不支持预览,请下载查看' } }
这里是后端返回回来一个附件名称列表 我渲染到左侧的附件列表中 然后通过选中不同的附件 右侧展示不同的文件预览 他的文件类型我也是从这里得到的 然后我通过点击不同的附件列表 执行上面的预览方法 获取到不同的blob数据 然后进行展示
我只能给大家说一下我的逻辑 毕竟每个人代码不一样 不一定能直接复制 还是希望能帮到大家
最后贴上效果图
$(function() { setTimeout(function () { var mathcodeList = document.querySelectorAll('.htmledit_views img.mathcode'); if (mathcodeList.length > 0) { for (let i = 0; i < mathcodeList.length; i++) { if (mathcodeList[i].naturalWidth === 0 || mathcodeList[i].naturalHeight === 0) { var alt = mathcodeList[i].alt; alt = '(' + alt + ')'; var curSpan = $(''); curSpan.text(alt); $(mathcodeList[i]).before(curSpan); $(mathcodeList[i]).remove(); } } MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } }, 1000) });
优惠劵阅读终点，创作起航，您可以撰写心得或摘录文章要点写篇博文。去创作
CV工程师!!
关注 关注
1
点赞
踩
0
收藏觉得还不错? 一键收藏
打赏
0
评论
专栏目录Vue实现文件预览，支持word excel pdf ppt image txt mp4等格式10-14Vue 实现前端文件预览，支持word excel pdf ppt image txt json mp4 等格式，集成到Vue项目中，已组件的方式引入即可，可是实现多种文件格式预览vue实现预览word，excel，ppt，pdf、图片、视频解决方案weixin_44378416的博客08-091万+
vue实现预览word，excel，ppt，pdf、图片、视频解决方案 第一种简单方法：参与评论 您还未登录，请先 登录 后发表或查看评论Word,Excel,PDF文件预览07-01文件预览功能 word, excel 文件转换pdf文件, 将预览文件夹发布,前台通过url嵌入预览vue移动端实现pdf、excel、图片在线预览weixin_50083085的博客03-10vue移动端实现pdf、excel、图片在线预览
纯前端文档预览，Vue实现，无需后端，支持Word、Excel、PPT、pdf、文本、图片，附接入demo和文档02-09纯原创资源，盗用必究，仅用于学习和交流，持续更新，可私信了解。 1. 整合目前市面上所有的纯前端Web组件，并二次开发改进稳定性 2. 目前最灵活的接入方案，基于Html5 postMessage传送blob数据，高度解耦 3. 支持所有文本、代码格式，所有主流图片格式，.mp4，.docx，.xlsx，.pptx, .pdf等主流文档格式的纯前端预览 4. 附带接入demo，使用纯js实现，可以用于任何场景vue实现本地预览word(docx)、excel(xlsx)、pdf文件qq_45158026的博客10-14vue实现本地浏览器预览word(docx)、excel(xlsx)、pdf文件vue3中文件预览功能的实现，包括 图片、pdf、word、excel的实现light的博客~~~12-01Vue3文件预览功能的实现，包括 图片、pdf、word、excel的实现vue项目实现常见的三种文件类型在线预览（pdf/word文件excel表格）weixin_52103939的博客01-12之前做PDF预览一直用的pdf.js，这次想需求们那么多想简化下，决定用vue-pdf这个组件，虽然说它没有原生那样强大，但已经满足常用的需求了，重要是这个组件使用简单。下面我们直接进入正题！ 一、安装vue-pdf npm install --save vue-pdf 二、在需要的页面注册 import PDF from 'vue-pdf' export default { components:{ PDF, }, data(){ revue 在线预览word、excel、pdf、txt、图片jyf_568的博客03-24excel文件预览 word文件预览 pdf文件预览 普通图片预览 一、查看word 引用mammoth.js 安装 npm install --save mammoth 引入import mammoth from “mammoth”; 1.页面2.数据 data() { ...vue预览 pdf、word、xls、ppt、txt文件方法genziisme的专栏06-19首先说下为什么要分享：特么的，网上教的都是特么的啥玩意！！！真特么垃圾，各种方法说不到点子上！！！真是特么气死我了，还有那群只会复制粘贴的帖子狗！妈的，自己都不做测试就会复制粘贴别人的，然后就发出来误人子弟，我真是醉了！ ...vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件 预览04-06vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件转Blob流 预览。实现前端选择文件 直接在页面展示，或者请求后端获取base64 string 字符串 转码 在前端页面展示vue实现内网pdf、word、excel文件预览操作WX_nbclass的博客08-08vue实现内网pdf、word、excel文件预览操作vue 实现 word/excel/ppt/pdf 等文件格式预览操作weixin_50450473的博客07-12/docx、excel、pdf文档预览组件，vue-office插件，其中docx文档预览是通过对docx-preview插件的二次封装，docx-preview插件不支持doc格式文件；docx文档预览是对exceljs插件的二次封装。希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~有文件大小限服务器托管网制，超过要收费！vue3预览pdf/word/excel/图片gusensen的博客06-29vue3预览pdf/word/图片vue3实现word，excel，pdf，mp3，mp4，ppt，txt文件预览weixin_45449046的博客03-10vue3实现word，excel，pdf，mp3，mp4，ppt，txt文件预览vue3+ts预览和下载word,pdf,excel感谢您阅读我的博客，如果您有任何问题或建议，请随时联系我。06-09vue3+ts预览和导出文件App如何实现pdf,word,excel格式的文件预览?tan_xiao_tan的博客06-10只能实现docx文件类型,doc文件类型不支持。只能实现xlsx文件类型,xls文件类型不支持。【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件热门推荐weixin_44590591的博客05-30Vue实现文档在线预览文档，在线预览PDF、Word、Excel和ppt等office文件前端实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）04-21前端实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）vue3 pdf word excel预览最新发布09-01有几种方法可以在Vue3中实现PDF、Word和Excel的预览。首先，可以使用Luckysheet插件进行预览。其次，可以直接在浏览器中打开这些文件，将下载链接转换为Office Web Viewer链接，并在网站或博客中使用。还可以使用XDOC文档预览云服务进行预览。另外，如果想在Vue3中预览PDF、Word和Excel文件，可以安装Luckyexcel插件。需要注意的是，Luckyexcel只能读取.xlsx格式的数据，无法读取.xls格式的数据。123 #### 引用[.reference_title] - *1* *2* *3* [【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件](https://blog.csdn.net/weixin_44590591/article/details/125044695)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]window.csdn.csdnFooter.options = { el: '.blog-footer-bottom', type: 2 }“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助提交CV工程师!! CSDN认证博客专家 CSDN认证企业博客码龄2年暂无认证
- 54
- 原创
- 12万+
- 周排名
- 3万+
- 总排名
- 1万+
- 访问
- 等级
- 599
- 积分
- 7
- 粉丝
- 42
- 获赞
- 16
- 评论
- 25
- 收藏
私信关注![]()
(adsbygoogle = window.adsbygoogle || []).push({});![]()
热门文章
- 一 , Element-UI tabs标签实现点击左右箭头 实现左右tab栏按个选中切换(正常是只会切换到后面空白tab栏 不会选中) .........二 , tabs标签切换不同的模板样式
- Layui动态添加下拉选项值以及根据后台返回数据默认选中某项值的功能 以及回显到表格上转变id为label值功能
- IDEA中找不到maven插件Plugin‘ ‘ not found 解决
- Postgresql 基础使用语法
- ant desgin vue 框架使用颜色选择器
分类专栏
开发Tips 8篇
Element-Plus 小tips 7篇
Vue预览文件 1篇
Vue 6篇
Element-UI 小tips 5篇
腾讯地图 2篇
时间设计模式 2篇
JAVA 4篇
Layui 14篇
Postgresql 1篇
Mui 1篇
维智地图 1篇
Ant desgin for VUE 3篇
openlayers 3篇
最新评论
您愿意向朋友推荐“博客详情页”吗？
最新文章
- Element Plus 文件上传限制格式 大全
- ElementPlus Switch 开关基础使用
- ElementPlus上传文件图片上传成功了但类于ajax.ts:80 POST http://localhost:8009/task/manifest 404 (Not Found) 报错
(adsbygoogle = window.adsbygoogle || []).push({});![]()
$("a.flexible-btn").click(function(){ $(this).parents('div.aside-box').removeClass('flexible-box'); $(this).parents("p.text-center").remove(); })目录
(adsbygoogle = window.adsbygoogle || []).push({});![]()
目录
分类专栏
目录
评论
被折叠的条评论 为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包请填写红包祝福语或标题
个红包个数最小为10个
元红包金额最低5元
当前余额3.43元 前往充值 >需支付：10.00元
![]()
打赏作者
CV工程师!!
你的鼓励将是我创作的最大动力
1 2 4 6 10 20扫码支付：1获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元使用余额支付扫码支付
钱包余额 0
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。余额充值
![]()
相关推荐: 使用纯 ABAP 开发 SAP UI5 应用(一)：abap2UI5 开发环境搭建介绍
我从 SAP 社区博客上了解到一个开源项目，名叫 abap2UI5, 作者是 Oblomov Dev，这是 Github 项目地址： https://github.com/abap2UI5/abap2UI5 这个项目最吸引 ABAP 开发人员之处在于： 传统的…
谁呀，咋的了: 大佬，有没有完整的代码，实在是没有学会
CV工程师!!: 从服务器返回的文本数据（在这里被命名为 html）。在这个回调函数中，代码解析 html 变量，通常是以 JSON 格式返回的地图要素信息
谁呀，咋的了: 大佬，第一种方法中的第4步中的html是哪里来的
fhhgfh: var fileName = $(this).data('file-name'); 这个方法获取不到当前点击的文件名字哈。大佬
CSDN-Ada助手: 非常棒的博客！恭喜你写了第18篇博客，标题"25 个 JavaScript 实用级语句 进阶"听起来很有趣和实用。你的持续创作精神令人钦佩！在你的博客中，我发现了许多有关 JavaScript 的有用信息。不过，我想提供一个谦虚的建议：或许你可以在未来的博客中分享一些关于 JavaScript 的高级技术或者更深入的主题。我期待着阅读你的下一篇博客，继续保持创作的劲头！