js 实现 pdf 在线预览 打印 【完整版】

今天想写的内容   因为网上有用的太少了，自己半摸索的实现了【文末有源码代码下载链接】。

1.说下需求：点击标题  跳转  预览的pdf  页，下载功能 可选【最好有】。

2.实现结果 ：

 

 

3.代码实现：

依赖pdf.js  【需要下载完整  控件】

下载官网：http://mozilla.github.io/pdf.js/

点击  ‘Download ’   到下载页

 

git 克隆  或者下载。

下载后文件长这样：

【重点在后面   项目如何部署组装】

1.新建一个空项目   把文件放到项目根目录下：

 

红色圈里 是官网下载的  就改个文件名字，然后拖进项目里，完全不用动里面任何文件记住，有需要另说。

绿色是我写的【dowwn.html   是测试文件;static  放pdf  文件】 下面贴代码：

list.html

    
    
    
    
    
    
    
    
    
    


产品说明书

    

         KD-122LA火灾探测报警器说明书ccc  
    
    

         KD-212LA 可燃气体探测器说明书  
    
    

         KD-216LA可燃气体探测器说明书  
    
    

         Kd-122LA KD-601系统遥控器使用说明  
    
    

         KD-602LA  SOS一键救助使用说明书  
    
    

         KD-701LA  溢水探测器使用说明书  
    
    

         KD-702LA红外人体移动探测器说明书  
    
    

         KD-703LA  门窗探测器使用说明书  
    
    

         KD-805A  WiFi系统主机使用说明书_V1.00  
    
    

         WIFI智慧家庭安防系统操作说明书_v0.01  
    

完毕！

注意：

本地测试不了，http://testweixin.kingdun.net.cn   是我们运维小哥哥发版后的服务器。我写本地不对，你也可以 node.js 自己搭个服务器。

注释：window.location.href = "http://testweixin.kingdun.net.cn/pdf/pdfjs/web/viewer.html?    直接跳转到 万能的pdf 组件里的html 页，该有的  国际化和下载打印功能   人家都写好了！

【兼容性】：苹果手机：直接预览，手机系统自带的，但是 不能下载 （有得必有失），可以在 别的应用中打开  例如  wps。

                       安卓：可预览 ，可下载，在手机默认浏览器打开  可支持下载，本人小米8，uc浏览器 下载乱码，但是 小米自带浏览器 可下载pdf文件。

交差。

 

彩蛋：down.html 

    
    
    
    
    
    
    
    
    
    


产品说明书

00001

哈哈，直接a 标签   href 跳转  pdf文件；也是ok的哦！【苹果手机：直接预览；；；安卓:下载 链接 】

 

【共享永久有效】：

链接: https://pan.baidu.com/s/1Ro1wOQKp2cw45AWUJL0BNQ 提取码: a83g 复制这段内容后打开百度网盘手机App，操作更方便哦