vue实现在线预览office文件的示例代码

最近在做电子档案，后端提供了文件的华为云的oss链接。已经实现了点击下载文件的功能。但是呢，他们又希望常规的文件，可以直接点击预览，不需要下载。

按道理说，做文件的在线预览，买个第三方服务什么的，后端部署一下服务，前端对接一下，就通通搞定。
顶不住第三方基本上是要money的。那不想掏money，还有什么解决方法呢。

方法一

用微软的office online进行在线预览

https://view.officeapps.live.com/op/view.aspx?src=文件地址
例：https://view.officeapps.live.com/op/view.aspx?src=http://www.xxx.com/xxx.ppt

方法二

用docx云服务的在线预览，用法跟微软差不多

http://view.xdocin.com/xdoc?_xdoc=文件地址

前提是后端提供的文件地址是要公开可访问的链接，比如我们这里是将文件上传到华为云的。文件只支持查看，不能编辑。

效果如下

上代码

    <!-- 预览图标 -->
                  <i
                    v-if="row.doc_url && canPreviewList.includes(row.doc_ext)"
                    style="font-weight: bold;font-size:16px;"
                    class="link-type el-icon-view"
                    @click.stop="previewFileEvent(row)"
                  />

    previewFileEvent(row) {
      const typeArr = ['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx']
      let url = ''
      if (typeArr.indexOf(row.doc_ext) !== -1) {
        // 使用微软的office online
        url = 'http://view.officeapps.live.com/op/view.aspx?src=' + row.doc_url
      } else {
        url = row.doc_url
      }
      // window.open()居中打开
      const width = 1000; const height = 800
      const top = (window.screen.availHeight - height) / 2
      const left = (window.screen.availWidth - width) / 2
      window.open(url, '', 'width=' + width + ',height=' + height + ',top=' + top + ',left=' + left)
    }

我这里使用的是微软提供的服务。可以用来打开'doc', ‘docx', ‘ppt', ‘pptx', ‘xls', 'xlsx'文件。
对其他文件做了一些处理，比如pdf,图片文件这些是可以直接通过链接打开的，浏览器支持直接预览。
而其他文件无法预览的，我这里做了限制，不让预览图标显示出来。

这里遇到个问题，txt文件，直接在浏览器打开是乱码的。下载下来是正常的，没找到解决方法。
有大佬知道的，带带。O(∩_∩)O

txt文件乱码的原因找到了。跟浏览器的编码格式有关。

我这里的txt文件，保存的时候是utf-8编码。但是谷歌浏览器默认的不是。

要修改成对应的编码格式，显示才会正常。

修改谷歌浏览器编码格式，需求到应用商店安装一个官方插件Set Character Encoding
安装完后，在页面右键点击修改编码格式即可。

到此这篇关于vue实现在线预览office文件的示例代码的文章就介绍到这了,更多相关vue 在线预览office 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue实现图片上传预览功能

    vue实现图片上传预览功能

    本文实例为大家分享了vue实现图片上传预览的具体代码,供大家参考,具体内容如下 效果图 html结构 <ul class="gallery-window-map" style="flex-wrap:wrap;"> <!--点击上传按钮--> <li class="house-pic-item" v-if="!(!item.isNew&&editBtnType[index])" @c

  • vue实现在线预览pdf文件和下载（pdf.js）

    vue实现在线预览pdf文件和下载（pdf.js）

    最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上.谷歌.安卓,苹果) 强烈推荐改插件,以下介绍用法 (1)下载插件 下载路径: pdf.js (2)将下载构建后的插件放到文件中public(vue/cli 3.0) (3)在vue文件中直接使用,贴上完整代码 <template> <div class="wrap"> <iframe :src=

  • vue中如何实现pdf文件预览的方法

    今天产品提出一个优化的需求,就是之前我们做的图片展示就是一个img标签搞定,由于我们做的是海外后台管理系统,那边的人上传的文件时pdf格式,vue本事是不支持这种格式文件展示的,于是就google搜索,发现有iframe.embed.vueshowpdf(测试了不咋好用).pdf等,本文说一下pdf插件的使用过程. 说明:iframe标签这种,对于有的链接是可以的,比如这种链接在服务器端没有设置享有头content-disposition,就可以直接显示,如下: 想复制代码如下: <iframe

  • Vue.js 2.0 移动端拍照压缩图片上传预览功能

    Vue.js 2.0 移动端拍照压缩图片上传预览功能

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • vue element upload实现图片本地预览

    vue使用element实现本地预览,最主要的是将图片路径转换为base64,供大家参考,具体内容如下 HTML <el-upload class="avatar-uploader" action="123" //这个路径不重要,可以随便写 :show-file-list="false" :on-success="handleAvatarSuccess" :on-change="onchange" :

  • vue+vant使用图片预览功能ImagePreview的问题解决

    如果您搜到这篇文章的话,那员外估计您遇到跟我一样的问题了,即在打开图片预览功能后,如果不关闭预览的图片,同时改变路由的话,会发现即使路由改变了,预览的图片还在文档的最顶层显示,如图: 着实让员外百思不其解,在调用vant 的 ImagePreview图片预览组件中,没有html,有的只是引入ImagePreview 和js的调用.在这种情况下,员外是想自己添加任何方法都没法实现的,同时想在离开路由时的beforeRouteLeave 钩子中关闭这个 ImagePreview  也实现不了,因为根

  • Vue.js图片预览插件使用详解

    Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程. 如果你已经是有经验的前端开发者,想知道 Vue

  • 基于Vue2x的图片预览插件的示例代码

    基于Vue2x的图片预览插件的示例代码

    本文介绍了基于Vue2x的图片预览插件的示例代码,分享给大家,具体如下: 先来看下Demo LiveDemo 关于开发Vue插件的几种方式 (具体请移步官网)Vue官网 MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, bin

  • vue实现在线预览office文件的示例代码

    vue实现在线预览office文件的示例代码

    最近在做电子档案,后端提供了文件的华为云的oss链接.已经实现了点击下载文件的功能.但是呢,他们又希望常规的文件,可以直接点击预览,不需要下载. 按道理说,做文件的在线预览,买个第三方服务什么的,后端部署一下服务,前端对接一下,就通通搞定. 顶不住第三方基本上是要money的.那不想掏money,还有什么解决方法呢. 方法一 用微软的office online进行在线预览 https://view.officeapps.live.com/op/view.aspx?src=文件地址 例:https

  • Vue实现在线预览pdf文件功能（利用pdf.js/iframe/embed）

    Vue实现在线预览pdf文件功能（利用pdf.js/iframe/embed）

    前言 最近在做一个精品课程,需要在线预览课件ppt,我们的思路是将ppt转换为pdf在线预览,所以问题就是如何实现在线预览pdf了. 在实现的过程中,为了更好地显示效果,我采用了多种不同的方法,最终选择效果最好的pdf.js. 实现方法: 1:iframe 采取iframe将pdf嵌入网页从而达到预览效果,想法很美好,实现很简单,但显示很残酷- 虽然一行代码简洁明了,打开谷歌浏览器效果也还行,但缺点也是十分明显的!!!! <iframe src="http......" widt

  • Vue-pdf实现在线预览PDF文件

    Vue-pdf实现在线预览PDF文件

    前言 在大多数项目中都会遇到在线预览PDF文件,项目使用的是element ui,使用vue-pdf实现. 安装依赖 npm install --save vue-pdf 相关参数 参数介绍: url :pdf 文件的路径,可以是本地路径,也可以是在线路径. page: 当前显示的页数,比如第一页page=1 rotate : 旋转角度,比如0就是不旋转,+90,-90 就是水平旋转. progress :当前页面的加载进度,范围是0-1 ,等于1的时候代表当前页已经完全加载完成了. page-

  • springboot利用aspose预览office文件的实现过程

    springboot利用aspose预览office文件的实现过程

    springboot项目使用aspose预览office文件,运行实现预览效果: 主要实现原理是:浏览器可以直接预览pdf,所以使用aspose把office文件转换为pdf文件,进行预览. 1.主要写了个简单的demo,项目目录: 2.pom.xml添加aspose的依赖包 (目前maven仓库不提供以下aspose的依赖包,可以自行下载添加进maven仓库,或者直接拉到最下面下载本人demo,demo提供了相应的jar包) <!--aspose预览office文件--> <depen

  • nodejs 图片预览和上传的示例代码

    nodejs 图片预览和上传的示例代码

    本文介绍了nodejs 图片预览和上传的示例代码,分享给大家,具体如下: 效果如下: 前言 一般在上传图片之前需要暂存在本地预览一下. 前端图片预览用的是 FileReader的readAsDataURL方法 nodejs 图片上传用的是中间件 Multer 本地图片预览 FileReader对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用文件或Blob对象来指定要读取的文件或数据. readAsDataURL方法用于读取指定的Blob或文件的内容.当读取操

  • WinForm中如何预览Office文件

    WinForm中如何预览Office文件

    本文为大家分享了WinForm预览Office文档的方法,供大家参考,具体内容如下 使用WinForm, WPF, Office组件 原理:使用Office COM组件将Word,Excel转换为XPS文档, 将WPF的DocumentViewer控件寄宿到WinForm中, 实现预览. 1. 新建WinForm项目 2. 新建WPF用户控件, 注意是WPF控件 3. 编辑WPF用户控件 <UserControl ... ...> <Grid> <DocumentViewer

  • .NET实现在网页中预览Office文件的3个方法

    .NET实现在网页中预览Office文件的3个方法

    近日公司要搞一个日常的文档管理的东东,可以上传.下载各种文件,如果是office文件呢还必须得支持预览功能,其他的都好说但是唯独office预览功能比较麻烦,但是不能不做,废话不多说了一步步来吧.分析了下网易邮箱的文件预览功能,他用的是微软的组件,最早叫Office online,现在分开了叫Word online.Excel online ....等等,效果十分炫酷功能十分强大,但是查看了下对api的说明发现对服务器的要求比较苛刻而且配置比较复杂不太适合.然后 又看了下腾讯用的是永中第三方组件

  • vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)

    vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)

    效果 若使用 请自行优化代码和样式 不显示图片/播放视频音频代码如下 <template> <div> <div v-on:dragover="tts" v-on:drop="ttrs" style="width: 800px;height: 200px;border: 1px solid black;font-size: 40px;line-height: 200px"> {{dt}} </div>

  • Vue中如何实现在线预览word文件、excel文件

    Vue中如何实现在线预览word文件、excel文件

    目录 实现效果 一.查看word 1.引用mammoth.js 2. 页面布局 3. 请求URL显示数据 二.查看Excel 1.引用sheetjs 2.页面布局 3.请求URL显示数据 三.项目应用:根据详情后缀分情况显示word.excel 1. 效果展示 2. 页面布局 3.调用函数展示数据 实现效果 一.查看word 1.引用mammoth.js (1)安装 npm install --save mammoth npm install --save mammoth (2)引入import

随机推荐