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

我总是词不达意2023-11-08 17:13

实现方案

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