在线展示pdf和word并且不能显示下载和打印按钮

最新推荐文章于 2022-08-30 19:01:39 发布

Bhys518

最新推荐文章于 2022-08-30 19:01:39 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签：前端

原文链接：https://www.cnblogs.com/GainLoss/p/7300593.html

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在线展示pdf和word并且不能显示下载和打印按钮

一下载功能：

因为html5给a标签新添加了一个属性download，这个属性可以直接实现下载文件的功能：这样就实现点击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

本文非原创，来自于zhang_yx 的博客原文地址：https://www.cnblogs.com/GainLoss/p/7300593.html

Bhys518

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
在线展示pdf和word并且不能显示下载和打印按钮

在线展示pdf和word并且不能显示下载和打印按钮一下载功能：因为html5给a标签新添加了一个属性download，这个属性可以直接实现下载文件的功能：这样就实现点击a标签下载文件了（这里面的是用的html5的属性，所以是不兼容ie8的）二在线浏览功能：第一种是用emded展示（这种是默认的有下载和打印功能，并且不能去掉）第二种 pdf利用的是pdf.js word利用的是xdo...
复制链接

扫一扫