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. git清理工作区

    git clean -f 这将删除所有未被追踪的文件 git rev-list

  2. CF1216X

    由于rating限制,和慎老师用小号打了一场div 3 从A到F都没啥思维含量..感觉最难想的就是C了?? CF1216C 考完以后想hack一下这道题,然后发现满屏都是分类讨论 我大概是写不动 or ...

  3. 在命令行中插入TAB键

    参考man bash: quoted-insert (C-q, C-v) Add the next character typed to the line verbatim.  This is how ...

  4. android中读取SD卡上的数据

    通过Context的openFileInput或者openFileOutput打开的文件输入输出流是操作应用程序的数据文件夹里的文件,这样存储的大小比较有限,为了更好的存取应用程序的大文件数据,应用程 ...

  5. vCenter 6.0 vsca 安装遇到的一些小问题

    在安装vCenter 6.0 vsca的时候,安装插件到第二个的时候,会报出一个windows installer的错误.需要联系软件管理员或者技术支持的一个error. 经过多次的测试,我终于找到了 ...

  6. shell date 格式化

    https://www.tutorialkart.com/bash-shell-scripting/bash-date-format-options-examples/ DATE=`date '+%d ...

  7. 一篇不一样的Android屏幕适配具体做法（原创）

    转载请注明出处(http://www.cnblogs.com/weizhxa/p/7568090.html ) 有不正确,还请大家留言修正! 1.何谓屏幕适配:在任何设备上看起来布局都是近似的,细分也 ...

  8. mongodb的学习 （2）

    1.条件查询 查询姓名为小明的学生                            db.local.find({name:'小明'});; 查询英语成绩大于90分的同学            ...

  9. linux crontab 计划任务脚本

    在LINUX中你应该先输入crontab -e,然后就会有个vi编辑界面,再输入0 3 * * 1 /clearigame2内容到里面 :wq 保存退出. 在LINUX中,周期执行的任务一般由cron ...

  10. date -d 对于时间的控制

    [root@ ~]# date "+%Y"2019[root@ ~]# date "+%Y%m%d"20190826 [root@localhost ~]# d ...