PDF.JS的基本使用

                    PDF.js的使用

网上下载的pdf.js的目录结构

1. 使用pdf.js浏览pdf
   只需要修改viewer.js文件的pdf路径即可
   var DEFAULT_URL = ‘xx.pdf’;(指定xx.pdf为默认打开文件)
   但是我们在实际的使用过程中,是需要通过传值的方式灵活的选择pdf进行预览
   首先,把viewer.js的 DEFAULT_URL 改成空,修改为
   http://localhost:8080/pdf/web/viewer.html?file=xx.pdf
   可以通过在file后面进行字符串拼接,这样可以选择需要预览的pdf文件

2. 在项目中使用pdf.js进行文件预览

<iframe src="<c:url value="static/pdf/web/viewer.html"/>?file=xx.pdf" width="100%" height="800"></iframe> 

可以使用iframe标签,上面的代码,只是访问pdf下的viewer.html页面,但是后面跟着的file参数则可以指定那个pdf文件做为对象
这样的问题是,只能预览工程里面的pdf文件,所以可以使用流来预览本地的文件

<iframe id="displayPdfIframe" width="100%" height="800"></iframe>

写下相应的JS

$(function() {    $("#displayPdfIframe").attr("src",'<c:url value="static/pdf/web/viewer.html" />?file=' + encodeURIComponent('<%=basePath%>pdfStreamHandeler.do?filePath=传递的参数'));          });

后台的相应的方法

@RequestMapping(value = "/pdfStreamHandeler")    public void pdfStreamHandeler(String filePath, HttpServletRequest request, HttpServletResponse response) {        String s = "E:/"+filePath;//根据自己实际情况拼接路径        File file = new File(s);        byte[] data = null;        try {            FileInputStream input = new FileInputStream(file);            data = new byte[input.available()];            input.read(data);            response.getOutputStream().write(data);            input.close();        } catch (Exception e) {            logger.error("pdf文件处理异常：" + e.getMessage());        }    }

通过流可以获取到自己想要的pdf文件,然后pdf.js就会找到这个pdf

补充:
PDF.js这个进行预览,上面一栏有很多工具,比如,打印,下载,这些功能,有时候项目中并不需要提供下载功能,这个工具也能隐藏掉下载按钮
在viewer.html这个界面的180行左右

<button id="download" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download">                  <span data-l10n-id="download_label">Download</span>   </button>

将这句注释掉即可,就会隐藏掉下载的按钮
这是别的博主写的方法,但是自己在隐藏下载按钮的时候遇见了一个问题,仅仅只将这句注释掉,我这边再进行预览的时候,上面的工具全部消失不见了,预览效果也没了,打开F12进行检查的时候,发现了JS报错,发现是viewer.js的问题

document.getElementById('download').addEventListener('click', SecondaryToolbar.downloadClick.bind(SecondaryToolbar));

大概在5856行,把这两句注释掉即可(好像就我遇到了这个问题,如果你也遇见了,可以试试看是不是这个问题)