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. java部署系列：CentOS下部署Java7/Java8

    一.前言 1.本文主要内容 CentOS下部署OracleJDK CentOS下部署OpenJDK 2.适用范围与本篇环境 适用范围 1.CentOS 6+2.Java 7+ 本篇环境 1.CentO ...

  2. 20-python基础-python3-reversed()函数

    描述 reversed 函数返回一个反转的迭代器. 语法 reversed(seq) 参数 seq -- 要转换的序列,可以是 tuple, string, list 或 range. # 字符串 s ...

  3. -k 组合调用执行部分用例

    场景:只执行符合要求的某一部分用例,通过类与方法的命名实 现.通常编写测试方法时 • 解决:使用-k • pytest -k "TestClass and test_one" • ...

  4. 利用HTML和CSS实现常见的布局

    水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是paren ...

  5. linux每日命令(4):解压命令

    1) Ubuntu 16.04 已经自动安装了unzip 软件,解压命令: unzip FileName.zip 2) 如果没有安装unzip,可以使用下面的命令安装: sudo apt instal ...

  6. echarts 给formatter文字添加不同颜色

    legend: { x : 'center', y : 'bottom', icon: "circle", itemWidth: 8, // 设置宽度 itemHeight: 8, ...

  7. 【转载】vue-cli搭建的环境，用nginx做代理服务器，访问时显示：Invalid Host header

    来源:https://blog.csdn.net/Cookysurongbin/article/details/86077241 vue-cli搭建的环境,用nginx做代理服务器,访问时显示:Inv ...

  8. celery使用多队列

    生产者: 文件1: 定义任务 #!/usr/bin/env python3 # coding: utf-8 from celery import Celery import settings pw = ...

  9. JavaScript常用技巧之数组操作

    1.获取最后数组中最后一个元素 . arr.slice(-1).pop() . arr[arr.length - 1] 2.过滤重复元素 arr.filter(function(v, i) { ret ...

  10. std::wcout输出1遍不输出

    std::wcout输出1遍不输出 程序明明在执行地方执行 wcout无法输出到控制台 cout就可以 添加中文支持即可