zoukankan      html  css  js  c++  java
  • 在线预览插件pdf.js使用记录

    在线预览插件pdf.js使用记录

    最近想做一个在线预览的功能,就找到了这个基于pdf.js插件,毕竟它是基于html5和js写出来的,相较于靠flash的其他插件,就不用多说了。下面就说下,使用过程写的demo中,遇到的问题。

    插件下载地址如下:http://mozilla.github.io/pdf.js/getting_started/#download

    看一下下图,down下pdf.js之后,我们解压文件看到如下图中的目录:
    这里写图片描述
    看到上面web目录下有个viewer.html,我们打开它,看到了一个官方的demo实现。我们只需要将它的代码复制到我们的项目中,然后进行修改即可。

    然后,建立我的项目,并把相关的js复制到项目中:
    这里写图片描述
    其中,testPdfjs.jsp为我的测试页面。
    这里写图片描述
    如果想改动访问的pdf路径,可以寻找viewer.js文件中DEFAULT_URL进行修改

    项目启动之后访问遇到的问题:

    • js找不到:
      这里写图片描述

    • pdf找不到:
      这里写图片描述

    针对上面遇到的问题,根据浏览器F12的控制台,我们轻易的看到问题出在哪里!注意到它请求文件的路径,便可以轻易解决问题。我们的项目是8080/ReviewServlet/xxxxx,但是请求是直接从8080/下面请求的,所以出现了问题。

    解决办法:

    一、如果是发现 pdf.worker.js找不到,如果是在eclipse启动的项目,需要改动eclipse的工作空间下面org.eclipse.wst.server.core下你创建的相应server的temp(x)目录,将最开始的pdf.js中zip解压出来的build文件复制到webapps下面,问题就得以解决。
    这里写图片描述

    二、如果是直接将war部署到tomcat上面,也同样是将build文件复制到webapps下面即可:
    这里写图片描述
    三、关于pdf的路径问题,如下图即可:
    这里写图片描述

    最后我们解决完以上遇到的问题之后,再次运行项目,然后访问相应的页面:
    这里写图片描述

    如此结束了初次体验,后续再针对pdf.js,可以把相关文档转换成pdf再用此插件预览或者其他业务相关操作。

  • 相关阅读:
    拼接表达式树的原理
    ql Server 2012完全卸载方法
    jquery tmpl 详解
    Entity Framework(EF) Code First将实体中的string属性映射成text类型的几种方式
    Entity Framework 数据生成选项DatabaseGenerated
    Entity Framework 复杂类型
    EF Code First 学习笔记:约定配置
    比特币转账流程
    mmap 的理解
    copy_to_user,copy_from_user,get_user,put_user函数比较
  • 原文地址:https://www.cnblogs.com/Kevin-1992/p/12608405.html
Copyright © 2011-2022 走看看