PDF.js的使用
网上下载的pdf.js的目录结构
使用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文件在项目中使用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行,把这两句注释掉即可(好像就我遇到了这个问题,如果你也遇见了,可以试试看是不是这个问题)