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

最新推荐文章于 2024-05-09 14:59:20 发布

我总是词不达意

最新推荐文章于 2024-05-09 14:59:20 发布

阅读量7.2k

点赞数 6

分类专栏： uniapp 前端 vue 文章标签： uni-app excel word vue.js 前端 pdf

本文链接：https://blog.csdn.net/weixin_43743175/article/details/134272408

版权

前端同时被 3 个专栏收录

86 篇文章 3 订阅

订阅专栏

vue

46 篇文章 1 订阅

订阅专栏

uniapp

17 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中利用vue-office库实现在浏览器中通过微软OfficeWebViewer预览Word、Excel和PDF文件，包括使用window.open、window.location.href和location.replace的方法进行链接预览并控制页面历史记录。

摘要由CSDN通过智能技术生成

实现方案

word，微软 Office Web Viewer

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

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的文件预览

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); //本页面内跳转链接实现预览，不留页面历史记录