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

相关推荐
SuperEugene5 分钟前
Vue3 + Element Plus 全局 Message、Notification 封装与规范|Vue生态精选
前端·javascript·vue.js
掘金安东尼6 分钟前
活动落地页效率翻倍:RollCode 这次更新有点猛
前端·低代码·面试
北冥有鱼其名为坤6 分钟前
诡异!vite+vue3 项目图片无法显示,我怀疑人生…
前端
FE_winter9 分钟前
OpenClaw Skills 进阶实战:前端开发者的 AI 技能库搭建指南
前端·后端·程序员
wordbaby25 分钟前
小白也能看懂:小程序 Canvas 给图片添加水印的终极指南
前端·canvas
Mapmost26 分钟前
“汛”速响应:流域洪水仿真分析,如何实现淹没过程的精准推演?
前端
梁大虎28 分钟前
Electrobun 开发必看:CEF 依赖下载失败?手动解压一招搞定!
前端·javascript·后端
青青家的小灰灰39 分钟前
拒绝 Prop Drilling 与隐式耦合:Vue 组件通讯的全景指南与最佳实践
前端·javascript·vue.js
代码老中医39 分钟前
我赌5年后,90%的CRUD页面都是AI生成的
前端
bluceli40 分钟前
前端监控与错误追踪实战指南:构建稳定应用的终极方案
前端·监控