logo头像

迪拜 ❤ 天空

PDFJS

PDFJS在线预览PDF

df.js是一款开源的pdf文档读取解析插件,据说在HTML5下诞生的,对于主流的浏览器基本都支持。

使用pdfjs在线预览pdf可以有两个选择:

  1. 使用pdfjs已经写好的viewer.html页面

    pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责核心解析

官网GitHub地址如下:https://github.com/mozilla/pdf.js

http://mozilla.github.io/pdf.js/

浏览pdf文档:http://xxxxxx/viewer.html?name=pdf地址

pdf.js nmp 搭建或者找个web目录放入,不跨域

viewer.js

var DEFAULT_URL = ‘compressed.tracemonkey-pldi-09.pdf’ 里面是PDF

  1. 我们只用修改viewer.js文件中的pdf路径参数即可:

var DEFAULT_URL = ‘09.pdf’;

如果pdf文件与viewer.html不在一层目录中,改成相对路径即可:

var DEFAULT_URL = ‘ ../doc/ 09.pdf’;

下面我就介绍下,具体嵌入项目中是如何运用的!

页面可以使用iframe标签来加载pdf

1
<iframe src="x/pdfJs/generic/web/viewer.html" />?file=xxx" />" width="100%" height="800"></iframe>

不知道大家有没有试过下面这段url请求:

1
http://localhost:8080/akane/resources/plugin/pdfJs/generic/web/viewer.html?file=/akane/displayPDF.do?id=966c6f0e-3c06-4154-aafd-afdbee5bcb65

我们在实际应用中,可能会根据不同的参数,来选择展示不同的pdf文件,此时就涉及到传参的问题了,仔细观察上面这段url地址会发现,在file请求参数中的值为一个url地址,而这个url地址又追加了自己的请求参数,这就导致一个url地址中出现2个”?”

导致浏览器不能正常解析这段url!

一种解决思路是:我们可以把file形参的值,先编码,然后再解码来解决这个问题!

此时,就可以请encodeURIComponent()函数出场了!因为其为js函数,所以需要在文档就绪函数中动态为iframe设置src的值,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
<%@ page contentType="text/html;charset=GBK" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript">
$(function(){
$("#displayPdfIframe").attr("src",'<c:url value="/resources/plugin/pdfJs/generic/web/viewer.html" />?file=' + encodeURIComponent('<c:url value="/displayPDF.do?id=${id}"/>'));
});
</script>
<div class="ctrlDiv">
<div class="eleContainer elePaddingBtm">
<iframe id="displayPdfIframe" width="100%" height="100%"></iframe>
</div>
</div>

既然有编码,那么就一定要有解码来解析他,不过这个工作generic/web/viewer.js已经替我们做过了,如下所示:

#office在线预览支持Word、Excel、Ppt

网上大概有这几种office在线预览的方法。

第一种

利用office online实现在线预览,Office平台提供了通过url的指向达到预览效果。

http://view.officeapps.live.com/op/view.aspx?src=
后面的src填写文档上传到服务器的地址,地址需要通过用URLEncode进行编译。

例:

http://view.officeapps.live.com/op/view.aspx?src=http%3A%2F%2Fvideo.ch9.ms%2Fbuild%2F2011%2Fslides%2FTOOL-532T_Sutter.pptx

参照链接:

https://blog.csdn.net/csdn_cjgu/article/details/69389474

优点:这个功能由Office提供所以只需要拼接地址。

缺点:文档的访问地址不能直接使用 ip,需要通过域名访问,并且端口必须是 80 端口,Word、ppt文档的大小不能超过10M,Excel不能超过5M

第二种

1.通过第三方工具openoffice,将word、excel、ppt、txt等文件转换为pdf文件,

2.通过swfTools将pdf文件转换成swf格式的文件;

3.通过FlexPaper文档组件在页面上进行展示。

参照链接:

https://blog.csdn.net/tmac937436/article/details/70799687?locationNum=14&fps=1

总结一下这种方法的利弊

优点:openoffice有各种版本,支持跨平台,转换速度快;

缺点:转换的样式会有缺损,Excel和openoffice完美不兼容 = . = ,转换的时候会出现折行,切分等情况,效果很不理想;

FlexPaper这个是用Flash插件显示的,展示的效果优点low。

第三种

利用poi实现office在线预览

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
public static void PoiWord07ToHtml (HttpServletRequest request) throws IOException{
String path= "C:\\Users\\Administrator\\Desktop\\";
String file = "C:\\Users\\Administrator\\Desktop\\word07.docx";
String file2 ="C:\\Users\\Administrator\\Desktop\\word07.html";
File f = new File(file);
if (!f.exists()) {
System.out.println("Sorry File does not Exists!");
} else {
if (f.getName().endsWith(".docx") || f.getName().endsWith(".DOCX")) {
//读取文档内容
InputStream in = new FileInputStream(f);
XWPFDocument document = new XWPFDocument(in);
File imageFolderFile = new File(path);
//加载html页面时图片路径
XHTMLOptions options = XHTMLOptions.create().URIResolver( new BasicURIResolver("./"));
//图片保存文件夹路径
options.setExtractor(new FileImageExtractor(imageFolderFile));
OutputStream out = new FileOutputStream(new File(file2));
XHTMLConverter.getInstance().convert(document, out, options);
out.close();
} else {
System.out.println("Enter only MS Office 2007+ files");
}
}
}

评论系统未开启,无法评论!