1、前端实现pdf文件在线预览功能

ps:刚好工作上有这个需求，所以到处找了一下处理方案，大家有需要可以试一下这几种方案，找到合适自己的

方式一、

pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览

<a href="文档地址"></a>

ps:这个会直接变成下载，注意使用

方式二、

通过jquery插件jquery.media.js实现
这个插件可以实现pdf预览功能（包括其他各种媒体文件）但是对word等类型的文件无能为力。
实现方式：
js代码：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript" src="jquery.media.js"></script>

下载地址：
jquery.media官方网址：http://malsup.com/jquery/media/
jquery.media GitHub地址：https://github.com/malsup/media/tree/master
jquery.media.rar（解压密码：crowsong.xyz）: http://waternote.ctfile.net/fs/2276132-372976040

html结构：

<body>

    <div id="handout_wrap_inner"></div>

</body>

调用方式：

$('#handout_wrap_inner').media({

    width: '100%',

    height: '100%',

    autoplay: true,

    src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'});

</script>

方式三、
引入

<script src="http://jhyt.oss-cn-shanghai.aliyuncs.com/images/1531367199089_PDFObject.js"></script>

html结构

<div id="example1"></div>

通过js动态添加需要浏览的pdf地址

var options = {

    height: "550px",

    pdfOpenParams: {view: 'FitV', page: '0' },

    name:"mans",

    fallbackLink: "<p>您的浏览器暂不支持此pdf，请下载最新的浏览器</p>"

};

PDFObject.embed(url文档地址, "#example1",options);

ps:理论上用来预览pdf文件，不具备处理word，xls，ppt等文件
2、word、xls、ppt文件在线预览功能

2-1、
word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现 (预览前提：资源必须是公共可访问的)

<iframe

src='https://view.officeapps.live.com/op/view.aspxsrc=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'>

</iframe>

使用方式：https://view.officeapps.live.com/op/view.aspx?src=文档地址
ps：适用pc端预览，这种方式在移动端不会自动适配，移动端会显示的很怪异。

2-2、

<iframe

    :src="'//ow365.cn/?i=18679&ssl=1&furl='+fileUrl"

    width="100%"

    height="100%"

    frameborder="0">

</iframe>

使用方式：//ow365.cn/?i=18679&ssl=1&furl=文档地址
ps：适用PC，移动端使用，但是有水印，但是不影响使用

2-3、

<iframe

    :src="'//www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc='+fileUrl"

    width="100%"

    height="100%"

    frameborder="">

</iframe>

使用方式：//www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=文档地址
ps：适用PC，移动端使用，不能处理比较老的word文件，比如.doc后缀的文件，但是显示很清晰，可惜会有个很大的微信二维码，暂时没想到办法怎么去掉，能去掉的的话，麻烦也告诉我一下，谢谢

前端实现预览ppt，word，xls，pdf文件的更多相关文章

  1. Web方式预览Office/Word/Excel/pdf文件解决方案

    最近在做项目时需要在Web端预览一些Office文件,经过在万能的互联网上一番搜索确定并解决了. 虽然其中碰到的一些问题已经通过搜索和自己研究解决了,但是觉得有必要将整个过程记录下来,以方便自己以后查 ...

  2. ReportViewer 不预览，直接导出 PDF文件

    作为笔记记着,以免以后再到处找资料 1. 在不预览的情况下导出文件 先看一个方法说明,想知道ReportViewer支持导出哪些文件类型,在Render方法说明中就有描述 // // Summary: ...

  3. java多图片上传--前端实现预览--图片压缩 、图片缩放，区域裁剪，水印，旋转，保持比例。

    java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...

  4. Asp.Net Core 2.0 项目实战（3）NCMVC角色权限管理前端UI预览及下载

    Asp.Net Core 2.0 项目实战(1) NCMVC开源下载了 Asp.Net Core 2.0 项目实战(2)NCMVC一个基于Net Core2.0搭建的角色权限管理开发框架 Asp.Ne ...

  5. Linux下markdown编辑软件 — retext 支持实时预览，存为pdf、html、ODT等

    本文由Suzzz原创,发布于 http://www.cnblogs.com/Suzzz/p/4129368.html,转载请保留此声明 ReText是一个linux下的markdown和reStruc ...

  6. 预览github项目的html文件新方法

    原文地址:→看过来 写在前面 关于如何在线预览github中的html文件,其实这是一个很多人知道的东西,但是查资料的时候呢总是找不到正确的答案,并且一开始我也是踩了坑的. 踩坑经历 搜出来的结果大概 ...

  7. 利用aspose-words 实现 java中word转pdf文件

    利用aspose-words  实现 java中word转pdf文件 首先下载aspose-words-15.8.0-jdk16.jar包 引入jar包,编写Java代码 package test; ...

  8. 关于pc端 app端pdf，word xls等文件预览的功能

    第一种用H5标签<iframe>标签实现 返回的文件类型,文件流,文件流返回必须在设置 contentType对应的Mime Type, 返回文件的物理位置. 已经实测可以支持的文件类型 ...

  9. 【ASP.NET 进阶】仿百度文库文档在线预览（支持格式.pdf,.doc,docx,xls,xlsx,.ppt,pptx）

    在[ASP.NET]PDF文件在线预览(类似百度文库)基础上进行了office文件到pdf文件的转换,然后在显示出来,效果如下: 问题说明: 1.请通过以下方式添加 Office COM 组件. 2. ...

随机推荐

  1. SpringBoot+Thymeleaf+iView

    SpringBoot+Thymeleaf参考: https://www.cnblogs.com/kibana/p/10236187.html 1.Controller: package cn.mmwe ...

  2. spark优化——依赖包传入HDFS_spark.yarn.jar和spark.yarn.archive的使用

    一.参数说明 启动Spark任务时,在没有配置spark.yarn.archive或者spark.yarn.jars时, 会看到不停地上传jar,非常耗时:使用spark.yarn.archive可以 ...

  3. 迭代器,生成器,yield,yield from理解

    迭代器 说到迭代器就得想说可迭代对象Iterable,实现了__iter__()方法的对象都是可迭代对象,例如很多容器,list ,set, tuples.使用iter方法可以把一个可迭代对象变成迭代 ...

  4. 后端大佬给我配置的deploy serves文件以便学习

    serves apiVersion: v1 kind: Service metadata: labels: com.wise2c.service: ui-ll-2 com.wise2c.stack: ...

  5. PHP通过KMP算法实现strpos

    起因 昨天看了阮一峰老师的一篇博客<字符串匹配的KMP算法>,讲的非常棒.这篇文章也是解决了: 有一个字符串"BBC ABCDAB ABCDABCDABDE",里面是否 ...

  6. openstack一些介绍

    最近刚考完redhat 的 openstack,就想来这里简单介绍一下. openstack涉及到overcloud和undercloud两个层面的操作,undercloud需要一些技术操作,然后来创 ...

  7. HDU-6532 Chessboard 2019广东省省赛B题（费用流）

    比赛场上很容易想到是费用流,但是没有想到建图方法qwq,太弱了. 这里直接贴官方题解: 费用流.离散化坐标,每行用一个点表示,每列也用一个点表示.表示第i-1行的点向表示第i行的点连边,容量为第i行及 ...

  8. KindEditor在eclipse里的配置方法

    KindEditor介绍: kindEditor是一款国产富文本编辑器,类似fckeditor和目前比较流行的百度Ueditor.其产品官方网站为http://kindeditor.net/ Kind ...

  9. react todelist

    1.点击按钮提交,新增对象 buttonChange() { this.setState({ //展开运算符...this.state.list,生成一个全新的数组 // list:[...this. ...

  10. linux上安装php phpredis扩展

    linux 下安装redis以及php Redis扩展 环境配置: centos6.0 nginx/1.0.0 php/5.3.8 mysql/5.5.17 步骤一.下载redis 可以去http:/ ...