vue 微软插件实现根据第三方网站链接预览word、pd、excelf等文件

news/2024/5/19 15:50:27/文章来源:https://blog.csdn.net/DarlingYL/article/details/130561940

一开始做的时候没想到会预览不了,报错

File not found
The URL of the original file is not valid or the document is not publicly accessible.
Verify the URL is correct, then contact the document owner.

如下:
在这里插入图片描述
我在微软官网查到:
官网地址:https://learn.microsoft.com/en-us/webappsserver/configure-office-web-apps-for-sharepoint-2013#problem-you-receive-a-file-not-found-the-url-of-the-original-file-is-not-valid-or-the-document-is-not-publicly-accessible-verify-the-url-is-correct-then-contact-the-document-owner-error-when-you-try-to-view-an-office-document-in-office-web-apps-by-using-a-user-generated-url

在这里插入图片描述
但原因就是第三方链接不能公网访问的。。。(复制第三方链接到浏览器,看看能不能打开链接文件的页面,不能打开或者他报错提示就是不能公网访问)

效果图

1、第三方网站的链接

需要在第三方网站设置链接在公网可以访问,一定要是公网可以访问的链接,如果公网不能访问就预览不了!!!我的项目中使用的是阿里云第三方网站

2、关键

fileUrl就是预览的文件地址,实际上跳转到微软来进行预览,我们只是嵌入它的页面
这样就可以实现预览功能了

3、前端完整功能代码

<el-button @click="handlePreview">预览</el-button>
<el-dialogtitle="预览文件":visible.sync="open"width="1200px":modal="true":append-to-body="true":close-on-click-modal="false"@close="open = false"><iframe :src="url" frameborder="0" scrolling-="auto" style="width:100%;height:600px;"></iframe><span slot="footer" class="dialog-footer"><el-button @click="open = false">取 消</el-button><el-button type="primary" @click="open = false">确 定</el-button></span></el-dialog>
data() {return {url: '',open: false}
}
handlePreview() {this.open = trueconst url = '第三方网站的链接'this.url = `https://view.officeapps.live.com/op/embed.aspx?src=${url}`
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_877672.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

世界第五大外包公司(CGI group inc)能够做出来多烂的网站,通过系分的课程设计我对于人机交互和团队合作的几个总结

文章目录 前情提要为开始刨祖坟模式做准备CGI inc发家史什么是外包公司CGI group inc看看CGI公司外包的网站你以为CGI做的网站这就算差了&#xff1f;听说你想自己改成好记的密码&#xff0c;想多了吧信息填写一次过&#xff0c;听说你想写到一半保存&#xff1f;我是随便的人吗…

小型网站到大型网站的演化过程

本文摘自书籍《大型网站技术架构.核心原理与案例分析》 1. 初始阶段&#xff1a; 应用程序、数据库、文件等所有资源都在一台服务器上。 2. 应用服务与数据服务分离 应用和数据分离后整个网站使用三台服务器&#xff1a;应用服务器、文件服务器和数据库服务器。这三台服务器对…

python爬取唯品会电商网站数据并保存到csv中

文章目录 1.目标、思路2. 获取数据3.解析数据4.保存数据 1.目标、思路 目标&#xff1a; 本次爬虫爬取的目标是唯品会中口红分类的商品。&#xff08;url &#xff09; 思路&#xff1a;打开网页后点击F12打开抓包工具&#xff0c;找到我们想要的数据包&#xff0c;并分析。 …

各大视频网站下载神器

先说介绍工具&#xff0c;后说使用方法&#xff08;其实不难&#xff09; you-get 是GitHub上的一个项目&#xff0c;其实就是通过几个命令行下载各大网站视频的&#xff0c;这对于做视频的爱好者及一些司机都是很奈斯的选择。 地址&#xff1a;https://github.com/soimort/y…

电子商务网站的 10 个易用性规则

电子商务网站的 10 个易用性规则 电子商务网站的竞争越来越激烈&#xff0c;虽然你可能在以最低的价格卖最好的东西&#xff0c;但同样重要的的是用户的购买体验&#xff0c;对电子商务网站而言&#xff0c;易用性就是让用户尽 可能快而简单的完成购买&#xff0c;有时候&…

基于jquery Stellar.js实现 网站视差滚动效果

stellar.js是一个 jQuery插件&#xff0c;能很容易地给网站添加视差滚动效果。 虽然已经停止了维护&#xff0c;但它非常稳定&#xff0c;与最新版本的jQuery兼容。 http://markdalgleish.com/projects/stellar.js/ 官网 1.引用js 包 <script src"path/to/jquery/jq…

推荐一个前沿的无线通信网站——定为电子

欢迎来到定为官网 成都定为电子技术有限公司是一家集咨询、设计、研发和生产无线通信数字基带和模拟前端等产品的高新技术企业&#xff0c;公司一直专注于算法原型验证、教学实验、无线通信和便携式仪器设备等领域。 在算法原型验证方面&#xff0c;定为电子坚持为客户提供最…

网站被DDOS攻击,我只用了2招应对

做网站难免遇到被黑客攻击&#xff0c;特别是关键词排名较靠前的站点&#xff0c;一些不正当的竞争对手会使用不正当的方法把你网站搞瘫&#xff0c;以便把流量引到自己平台上让自己得利。不管是大平台网站还是小平台网站都会遇到DDOS攻击&#xff0c;难道面对DDOS&#xff0c;…

【Python】利用网站API接口获取天气信息

本文主要讲如何利用Python来获取天气信息。主要程序实现思路是从命令行传递坐标信息&#xff0c;然后利用天气预报网站的免费接口获取到相关天气信息&#xff0c;返回结果以json格式显示&#xff0c;并打印出需要的近3天天气情况。 信息源&#xff1a;https://openweathermap.…

做一个酷网站(2)

成品 成品源码 接上篇博客 相信你根据 Demo 的源代码 已经可以制作一个简单的动态网站了 核心思想 同时动态修改 style 标签 和 页面上 某个元素的内容产生一种网站在动态展示的效果 知识点 ES6 箭头函数使用setInterval(fn, n)substring(n, m)document.querySelector()dom 元…

用户访问一个网站的整过程

原文网址&#xff1a;https://blog.csdn.net/yonggeit/article/details/72857630 用户访问网站流程框架 第一步&#xff1a;客户端用户从浏览器输入www.baidu.com网站网址后回车&#xff0c;系统会查询本地hosts文件及DNS缓存信息&#xff0c;查找是否存在网址对应的IP解析记…

手机网页的设计vs2008开发wap网站(一)

vs2008开发wap网站(一)首先新创建个项目&#xff0c;打开VS2008&#xff0c;新建个网站项目&#xff0c;我们添加新项时会发现以前在vs2003或vs2005中的“移动Web窗体”项没有了&#xff0c;下图为vs2003和2005中的。 vs2008中就没有“移动Web窗体”这一项&#xff0c;这…

优化网站性能 提高网站速度访问速度的14条实践

相信互联网已经越来越成为人们生活中不可或缺的一部分。ajax&#xff0c;flex等等富客户端的应用使得人们越加“幸福”地体验着许多原先只能在C/S实 现的功 能。比如Google机会已经把最基本的office应用都搬到了互联网上。当然便利的同时毫无疑问的也使页面的速度越来越慢。自己…

利用代码托管平台 Pages 搭建静态个人网站

一、写在前面 笔者最近接触生成个人博客的开源项目&#xff0c;玩着挺有意思的。用简单的命令生成vue或go的项目模板。通过markdown语言文档生成静态页面。网上也有很多教学博客。感谢各位大神博主的分享。这里也简单记录下我的使用笔记。 二、开源的hexo框架 框架简介 官方…

推荐3个网页设计在线配色网站

推荐3个网页设计在线配色网站 对于网页设计师而言&#xff0c;每个网站的设计都需要一套最适合它的配色方案&#xff0c;配色方案的选择关系到整个网站的成功与失败。你会不会因为苦恼于一个很急的网站项目的配色方案迟迟没有确定&#xff0c;而抓狂呢&#xff1f;下面暴风彬彬…

提高网站设计可用性(有效性)的10条原则

决定一个网站成败命运的&#xff0c;不是视觉设计&#xff0c;而是设计的可用性和有效性。访问网页的用户们握着鼠标&#xff0c;决定一切&#xff0c;“以用户为中心”已然是成功网站的标准设计方向。总之&#xff0c;用户不用的功能&#xff0c;就不该存在。 我们并不打算重复…

精选31个网站界面设计实践教程

精选31个网站界面设计实践教程 设计一个网站从来都不是一件容易的事。如果你去询问一位在该行业有丰富经验的网页设计师&#xff0c;他会告诉你以前根本没有太多关于Web设计/开发的资源、文章和各种沟通交流平台&#xff0c;更不用说高质量免费教程了。 如果您打算建立自己的个…

Photoshop 爱好者应该收藏的42个网站

Photoshop 是 Adobe 公司旗下最为出名的图像处理软件之一&#xff0c;集图像扫描、编辑修改、图像制作、广告创意&#xff0c;图像输入与输出于一体的图形图像处理软件。今天&#xff0c;本文与大家分享42个非常有用的 Photoshop 设计教程和素材资源网站&#xff0c;希望能帮助…

分享20佳极具创意的网站导航菜单设计案例

导航菜单作为网站必不可少的组成部分&#xff0c;关系着网站的可用性和用户体验。有吸引力的导航能够吸引用户去浏览更多的网站内容&#xff0c;增加用户在网站的停留时间。为了让导航能够和网页内容完美的融合在一起&#xff0c;设计前需要设仔细分析网页结构。下面收集了20佳…

免费下载精美网站模板的25个网站推荐

免费下载精美网站模板的25个网站推荐 这篇文章向大家推荐25个免费下载网站模板的网站&#xff0c;这些网站分享了众多精美的网站模板&#xff0c;您可以免费下载使用&#xff0c;相信这些精美的 网站模板 既能够帮助您节省大量的时间和精力&#xff0c;又能有很满意的效果&…