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

相关推荐
野生的程序媛9 分钟前
重生之我在学Vue--第8天 Vue 3 UI 框架(Element Plus)
前端·vue.js·ui
前端付杰37 分钟前
从Vue源码解锁位运算符:提升代码效率的秘诀
前端·javascript·vue.js
然后就去远行吧38 分钟前
小程序 wxml 语法 —— 37 setData() - 修改对象类型数据
android·前端·小程序
用户32035783600240 分钟前
高薪运维必备Prometheus监控系统企业级实战(已完结)
前端
黄天才丶1 小时前
高级前端篇-脚手架开发
前端
乐闻x1 小时前
React 如何实现组件懒加载以及懒加载的底层机制
前端·react.js·性能优化·前端框架
小鱼冻干1 小时前
http模块
前端·node.js
悬炫1 小时前
闭包、作用域与作用域链:概念与应用
前端·javascript
jiaHang1 小时前
小程序中通过IntersectionObserver实现曝光统计
前端·微信小程序
打野赵怀真1 小时前
前端资源发布路径怎么实现非覆盖式发布(平滑升级)?
前端·javascript