这篇实现的是在线展示pdf和word并且不能显示下载和打印按钮

一 下载功能：

因为html5给a标签新添加了一个属性download，这个属性可以直接实现下载文件的功能：<a href="xxx.pdf" download="名字"></a> 这样就实现点击a标签下载文件了（这里面的是用的html5的属性，所以是不兼容ie8的）

二 在线浏览功能：

第一种是用emded展示（这种是默认的有下载和打印功能，并且不能去掉）

第二种 pdf利用的是pdf.js word利用的是xdoc （比较推荐第二种）

（1）pdf文件

github上面有https://github.com/mozilla/pdf.js可以看一下文档

我的代码的github地址：https://github.com/GainLoss/Online-browsing

过程：找到my-pdf.js中的这个文件夹，然后将这个文件夹放到你的代码中，在layui中初始化的时候的content上加上viewer.js的地址?file=pdf的地址就可以获取到你需要获取的pdf了

注意：

1.在viewer.js中有个变量，将这个变量的赋值去掉

2.如果出现了这种的话就是出现了跨域问题了

3.（这种需要上传的文件比较多，正式部署的时候，代码就一个pdf上传的代码太多了，这块需要改进）

（2）word文件

content:'http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=你文件的地址',这里面是将文档给了第三方 然后通过第三方转给你一个可以用的。

如果出现问题，大部分都是你的文件地址或者是跨域的原因

资源：http://www.xdocin.com/

三 .弹框的在线展示文件

我们利用的是layer，这个是针对弹出框的一个web弹层组件。有兴趣的可以直接看看官网：http://layer.layui.com/

我们实现将文件放置到layer弹出框的过程，只是将文件的路径获取到，然后将layer的选项配置一下就可以了代码是：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <title>开始使用Layui</title>

</head>

<body>

<button style="width:100px;height:50px;" class="btn">弹出</button>

<script src="./jquery.js"></script>

<script src="./layui/layui.js"></script>

<script>

 $(".btn").click(function(){

    layui.use(['layer', 'form'], function(){

    var layer = layui.layer,form = layui.form();

    layer.open({

		type : 2,

		title : '<span class="layer-title-move-text">文件预览(此处可以拖动)</span> - <a href="./1.pdf" download="1.pdf">立即下载</a>',

		shadeClose : true,

		move : '.layer-title-move-text',

		shade : false,

		resize : true,

		maxmin : true, // 开启最大化最小化按钮

		area : ['800px', '500px'],

		content : './1.pdf'

	});

    });

 })

</script> 

</body>

</html>

参考资料：http://www.cnblogs.com/kagome2014/p/kagome2014001.html

我的github:https://github.com/GainLoss/Online-browsing

实现pdf word在线浏览和下载的更多相关文章

  1. vue 中PDF实现在线浏览，禁止下载，打印

    需求:在线浏览pdf文件,并且禁止掉用户下载打印的效果. 分析:普通的iframe.embed标签都只能实现在线浏览pdf的功能,无法禁止掉工具栏的下载打印功能.只能尝试使用插件,pdfobject. ...

  2. 利用PDF.JS插件解决了本地pdf文件在线浏览问题（根据需要隐藏下载功能，只保留打印功能）

    我是在IE11和谷歌上做的测试,都可以显示,把做出的东西记录下来,方便大家还有自己学习! 可以在IIS7服务器上也可以下载Tomcat来做服务器 Tomcat下载地址   http://pan.bai ...

  3. https://github.com/Lushenggang/show-pdf在线浏览pdf文件在线浏览pdf文件

    在线浏览pdf文件 https://github.com/Lushenggang/show-pdf https://github.com/Lushenggang/show-pdf

  4. asp.net 将ppt，word转化为pdf实现在线浏览详解

    1.首先添加应用:COM里面的Micsosoft Office 12.0 Object Library(VS2013基本都有14.0或者15.0 有的话一样的添加,因为我的没有只有12.0) : 2. ...

  5. 在禅道中实现WORD等OFFICE文档转换为PDF进行在线浏览

    条件: 安装好禅道的服务器 能直接浏览PDF的浏览器(或通过 安装插件实现 ) 文档转换服务程序(建议部署在另一台服务器上)     实现 原理: 修改禅道的文件预览功能(OFFICE文档其使用的是下 ...

  6. php实现word在线浏览功能。

    http://laoniangke.com/php/2012/10/08/php-doc-webview.html

  7. Java中实现pdf在线查看和下载

    Java中实现PDF的在线查看和下载,可以以servlet来实现. /** * 支持在线打开和下载 * * @param filePath * @param response * @param isO ...

  8. ASP.NET实现在线浏览Word文档另一种解决方案(Word转PDF)

    ASP.NET实现在线浏览Word文档另一种解决方案(Word转PDF)      上述博文里提到的在线浏览pdf的方案不错,但word转pdf的那个dll只支持doc不支持docx,附上最新的下载链 ...

  9. PDF/WORD/EXCEL/PPT 文档在线阅读

    查资料看了2种解决方法: 1.通过办公软件dll转换,用flans去看 2.通过Aspose转换成pdf格式,在用js前台读pdf(我用的pdf.js) 今天我解决的就是WORD/EXCEL/PPT ...

随机推荐

  1. POJ3074 Sudoku 剪枝深（神？）搜

    emm...挺秀的...挺神的? 每行,每列,每宫用一个二进制数表示选或没选的状态,刚开始设没选为1,然后更改状态的时候异或一下就好了: 这样可以通过lowbit取出每一个没有选过的数:(妙啊? 关于 ...

  2. BZOJ 4373 算术天才⑨与等差数列 线段树+set（恶心死我了）

    mdzz,这道题重构了4遍,花了一个晚上... 满足等差数列的条件: 1. 假设min是区间最小值,max是区间最大值,那么 max-min+k(r−l) 2. 区间相邻两个数之差的绝对值的gcd=k ...

  3. Install NGINX, PHP-FPM (5.6) on CentOS 6

    Installing NGINX with PHP on CentOS 6 can be a hassle depending on the install and packages you use. ...

  4. hive默认配置 .hiverc

    -- 切换数据库 use database_name; -- 优化本地查询 set hive.fetch.task.conversion=more; -- 设置hive的计算引擎为spark set ...

  5. canvas基础入门（二）绘制线条、三角形、七巧板

    复杂的内容都是有简单的线条结合而成的,想要绘制出复杂好看的内容先从画直线开始 canvas绘制直线先认识几个函数 beginPath():开始一条路径,或重置当前的路径 moveTo(x,y):用于规 ...

  6. 异地clone RAC数据库 +ASM USE RMAN

    ###sample 如何在本地生成数据库的备份,并复制到DG库新环境(高级) 1. 首先确定本地文件系统(存放备份集)足够大,可以使用如下语句查询当前数据库实际的使用总大小 Rman 备份进度: se ...

  7. 干货-Spring3.2.3的所有注解

    在用到Spring3的时候,我们需要对耦合的struts2的Action层或者SpringMVC的Controller层加上注解,一般是@Controller和@RequestMapping 看到这里 ...

  8. shell中各种括号()、(())、[]、[[]]、{}的作用和区别

    查看原文 - CSDN

  9. Hive学习（二）

    1.Hive数据导入 2.Hive的数据查询 3.Hive的Java客户端和自定义函数 1.Hive数据导入 (1.1)使用Load语句导入 HiveQL中提供LOAD DATA命令,用于导入数据到H ...

  10. (转)Python中的split()函数的用法

    Python中的split()函数的用法 原文:https://www.cnblogs.com/hjhsysu/p/5700347.html Python中有split()和os.path.split ...