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. docker-compose的scale的用法

    用到的三个文件 docker-compose version: " services: redis: image: redis web: build: context: . dockerfi ...

  2. MQ入门介绍

    MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过写和检索出入列队的针对应用程序的数据(消息)来通信,而无需专用连接来链接它们.消息传递指的是程序 ...

  3. kali linux 2019.4 最新版设置中文 - 开启win10风格界面

    最新版 kali linux 2019.4 默认是不带中文字体的,执行以下命令,便可以显示: kali源:vi /etc/apt/source.list #中科大 deb http://mirrors ...

  4. 8、服务发现&服务消费者Feign

    spring cloud的Netflix中提供了两个组件实现软负载均衡调用,分别是Ribbon和Feign.上一篇和大家一起学习了Ribbon. Ribbon :Spring Cloud Ribbon ...

  5. npm 安装扩展模块时，因缓存报错的问题汇总

    1.缓存报错问题一 :    unexpected end of file 解决方法:运行:npm cache verify  清除缓存 2.缓存报错问题二 :   errno -4048(网上一般说 ...

  6. docker 部署 mysql8 的 docker-compose 文件编写

    version: '3.4' services: mysql: container_name: platform.mysql. deploy: resources: limits: memory: 3 ...

  7. HDU-3001 TSP+三进制DP

    题意:给出一个无向图,每个点不能被经过超过两次,选择一个起点问经过所有点至少一次的最短路径. 解法:注意此题是每个点不能经过超过两次,这和一般的TSP问题不同.但是也没有使得此题变得很复杂,原来的状态 ...

  8. TCP 三次握手和四次挥手中的ACK 为什么总是SYN + 1 或者 FIN +1 而不是+ 其他数值？

    TCP 三次握手的时候 1.客户端 向服务端发起连接请求,这个时候客户端将发送一个SYN分节(假设其值为J),它告诉服务端我发送数据的初始序列号将是J. 2.服务端收到这个请求后,必须确认(ACK) ...

  9. tcp/ip的通俗讲述(转)

    源地址:https://www.runoob.com/tcpip/tcpip-tutorial.html 对于我们来说网络世界丰富多彩,对于互联网来说也就是数据根据相应的规则在跑来跑去.(这些规则就是 ...

  10. 安装配置oh-my-zsh

    1.下载安装iterm:https://www.iterm2.com/ 2.安装zsh 查看系统当前使用的shell $ echo $SHELL /bin/bash 查看系统是否安装了zsh $ ca ...