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

相关推荐
还有多久拿退休金3 分钟前
DragSortTable:一个让我怀疑人生的滚动重置 Bug
前端
渐儿6 分钟前
组件库开发入门到生产(从零封装到 npm 发布)
前端
KaMeidebaby32 分钟前
卡梅德生物技术快报|单 B 细胞抗体制备:流程优化、表达系统适配与性能数据
前端·数据库·其他·百度·新浪微博
lichenyang4531 小时前
从鸿蒙 AI 聊天 Demo 学习 ArkUI V2:第一天上手记录
前端
进击的松鼠1 小时前
OpenClaw 的五层架构设计与解析
前端·架构·agent
JavaGuide1 小时前
Claude Code 新功能Agent View 发布:终于不用在一堆终端窗口里找 Agent 了!
前端·后端·agent
不简说1 小时前
前端可视化打印设计器sv-print,一口气更新了30版
前端·源码·产品
颖火虫盟主1 小时前
Claude Code Hook 系统详解与 Hello World 实操
前端·网络·数据库
JavaGuide1 小时前
Claude Code + BrowserAct,夯爆了!一句话让 AI 帮你操控浏览器。
前端·后端·ai编程
七十二時_阿川1 小时前
Electron WebContents 完全指南:页面渲染、导航控制与安全实战
前端·electron