Office在线预览

usdoc

Office文件在线预览是目前在线办公必不可少的一项需求,一般情况都是需要后端去完成的。那么我作为前端工程师的我们如何解决这一问题呢?

  1. 第一步,获取准备预览地址
    此处使用的usdoc的在线预览模式,使用方法以及开发文档可以参考
    http://usdoc.cn/show
    前置预览地址: http://vw.usdoc.cn/?src=
    这个地址src后面紧跟文件地址
    如: http://vw.usdoc.cn/?w=5&src=https://zh.usdoc.cn/view/三好学生申请书.wps
    =注意=

    src后面的文件地址建议编码一下,如果路径中含有中文在某些浏览器可能会无法获取单文件解析。

    代码如下:

    <!DOCTYPE html>
    <html lang="zh">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
         <title></title>
         <style type="text/css">
             #app>input {
                 width: 300px;
                 height: 30px;
                 border-radius: 3px;
                 border-style: none;
                 border: 1px solid #bababa;
             }
             #app>button {
                 padding: 10px 30px;
                 border: 1px solid #bababa;
                 background-color: #FFF;
                 border-radius: 3px;
             }
             iframe {
                 border-style: none;
                 border: 1px solid #d8d8d8;
             }
         </style>
     </head>
     <body>
         <div id="app">
             <span>文件地址:</span>
             <input name="fileSrc" type="text" />
             <button id="view">预览</button>
         </div>
         <iframe src=""
             width="800" height="650">
         </iframe>
     </body>
    </html>
    <script src="js/jquery-2.2.0.min.js"></script>
    <script type="text/javascript">
     var preSrc = "http://vw.usdoc.cn/?w=5&src="; 
     /**
      *点击开始预览 
      */
     //http://vw.usdoc.cn/?w=5&src=https://zh.usdoc.cn/view/三好学生申请书.wps
     $("#view").click(() => {
         let url = $("input[name='fileSrc']").val();
         if (url.trim()=="") {
             //没有获取到文件地址
         }
         //文件地址url解码一次,防止中文出错
         url = decodeURIComponent(url);
         $($("iframe")[0]).attr("src",preSrc url)
     })
    </script>

    image.png
    这样就是实现了WPS文件在线预览的效果,更多预览效果可以参考usdoc的其他模式。
    可以参考开发文档: http://usdoc.cn/show

阅读 1.1k

专注于office文件在线解析,文件在线预览及文字识别

3 声望
0 粉丝
0 条评论

专注于office文件在线解析,文件在线预览及文字识别

3 声望
0 粉丝
文章目录
宣传栏