apicloud apicloud

注册
查看: 783|回复: 1

[模块教程] pdfViewer(pdf阅读器)demo分享

主题:
20
帖子:
106
云币:
126

[模块教程] pdfViewer(pdf阅读器)demo分享

783 1 | 发表于 2019-12-11 18:25:09 |阅读模式 | |
pdfViewer 封装了一个简单的 pdf 阅读器,本模块只支持阅读 pdf 格式的文档,本模块支持对网络 pdf 文件的阅读,当传入一个网络路径,模块内部会先下载文件到本地缓存文件,然后再打开读取。用户再次打开相同路径的网络文件时,则先读取缓存在本地的文件。
运行图如下:


         

前端示例代码如下:
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
  6.     <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
  7.     <title>WinA</title>
  8.     <link rel="stylesheet" type="text/css" href="css/api.css" />
  9.     <link rel="stylesheet" type="text/css" href="css/box.css" />
  10.     <script type="text/javascript" src="script/public.js"></script>
  11.     <style>
  12.             p{
  13.                     color:#999;
  14.                     padding:5px;
  15.             }
  16.             #main{
  17.                     text-align:center;
  18.                     padding-top:550px;
  19.             }
  20.             #main button{
  21.                     width:280px;
  22.                     margin-bottom:10px;
  23.             }
  24.     </style>
  25.         <script type="text/javascript">
  26.                
  27.                 var demo = null;
  28.                 apiready = function(){
  29.                     demo = api.require('pdfViewer');
  30.             }

  31.                 function openView(){
  32.                     var param = {
  33.                                 msg:"Hello APICloud!",
  34.                                 path:"http://myemail.bceapp.com/res/swift.pdf",
  35.                                 rect:{x:5,y:50,w:api.winWidth-2,h:500}
  36.                         };
  37.                     console.log(demo.openView);
  38.                     demo.openView(param, function(ret, err){
  39.                         console.log(JSON.stringify(ret));
  40.                     });
  41.                 }
  42.                
  43.                 function preView(){
  44.                         var param={bgColor:'#ff0000'}
  45.                     demo.preView(param,function(ret,err){})
  46.                 }

  47.                 function category(){
  48.                     demo.category(function(ret, err){
  49.                         console.log(JSON.stringify(ret));
  50.                     });
  51.                 }
  52.                
  53.                 function showView(){
  54.                     demo.showView(function(ret, err){
  55.                         console.log(JSON.stringify(ret));
  56.                     });
  57.                 }
  58.                
  59.                 function hideView(){
  60.                     demo.hideView(function(ret, err){
  61.                         console.log(JSON.stringify(ret));
  62.                     });
  63.                 }
  64.                
  65.                 function clearCache(){
  66.                     demo.clearCache(function(ret, err){
  67.                         console.log(JSON.stringify(ret));
  68.                     });
  69.                 }
  70.                
  71.                 function closeView(){
  72.                     demo.closeView(function(ret, err){
  73.                         console.log(JSON.stringify(ret));
  74.                     });
  75.                 }
  76.                
  77.         </script>
  78. </head>
  79. <body>
  80.     <div id="wrap">
  81.         <div id="main">

  82.                         <button onclick="openView()" >openView()</button><br>
  83.                         <button onclick="preView()" >preView()</button><br>
  84.                         <button onclick="category()" >category()</button><br>
  85.                         <button onclick="clearCache()" >clearCache()</button><br>
  86.                         <button onclick="showView()" >showView()</button><br>
  87.                         <button onclick="hideView()" >hideView()</button><br>
  88.                         <button onclick="closeView()" >closeView()</button><br>
  89.                        
  90.                 </div>
  91.         </div>
  92. </body>
  93. </html>
复制代码

如有问题,欢迎在下方留言讨论,谢谢支持。

本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

职业车手

UID:436609

主题:
44
帖子:
1811
云币:
2479

足球狗

发表于 2019-12-11 21:49:33 |
感谢分享
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表