uniapp h5实现Excel、Word、PDF文件在线预览,而不是跳转下载,也不需要下载

实现方案

word,微软 Office Web Viewer
javascript 复制代码
const url = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent('https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx')}`
window.open(url) //新建窗口打开链接预览
//或
window.location.href = (url); //本页面内跳转链接实现预览,留页面历史记录
//或
location.replace(url); //本页面内跳转链接实现预览,不留页面历史记录
excel,微软 Office Web Viewer
javascript 复制代码
const url = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent('http://static.shanhuxueyuan.com/demo/excel.xlsx')}`
window.open(url) //新建窗口打开链接预览
//或
window.location.href = (url); //本页面内跳转链接实现预览,留页面历史记录
//或
location.replace(url); //本页面内跳转链接实现预览,不留页面历史记录
pdf,pfile的文件预览
javascript 复制代码
const url = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent('https://www.*********.pdf')}`
window.open(url) //新建窗口打开链接预览
//或
window.location.href = (url); //本页面内跳转链接实现预览,留页面历史记录
//或
location.replace(url); //本页面内跳转链接实现预览,不留页面历史记录

vue-office库

https://www.npmjs.com/package/@vue-office/excel

相关推荐
爱勇宝1 分钟前
别再混用了!import.meta.env 与 process.env 的本质差异一次讲透
前端·javascript·vue.js
清粥油条可乐炸鸡5 分钟前
tanstack query的基本使用
前端·axios
路修远i21 分钟前
基于SSE的AI对话流式结构
前端·javascript
攀登的牵牛花41 分钟前
前端向架构突围系列 - 跨端技术 [11 - 1]:JSBridge 原理与 Hybrid设计
前端
用户5757303346241 小时前
从 LocalStorage 待办清单到 CSS 核心机制:一次搞懂数据持久化、继承与盒模型陷阱
前端
codingWhat1 小时前
前端组件库开发实践:从零到发布
前端·npm·vite
cxxcode1 小时前
浏览器模块加载与 Webpack 打包原理
前端
兆子龙1 小时前
React Compiler 来了:少写 useMemo,照样稳
前端·架构
用户5433081441941 小时前
Manifest V3 实战:从补天网站逆向到 Chrome 扩展开发全记录
前端·后端
zhqiok1 小时前
React中类似于Vue中Pinia的轻量级状态管理神器——Zustand
前端