一、插件下载
下载地址:http://mozilla.github.io/pdf.js/
内含demo页面,打开后显示效果如图所示:
二、使用方法
将控件的相应文件引入
<link rel="stylesheet" href="../../js/plug/pdfjs/web/viewer.css">
<link rel="resource" type="application/l10n" href="../../js/plug/pdfjs/web/locale/locale.properties">
<script src="../../js/plug/pdfjs/build/pdf.js" type="text/javascript"></script>
<script src="../../js/plug/pdfjs/web/viewer.js" type="text/javascript"></script>
页面可在viewer.html的基础上修改
pdf文件引入方法
方法1:修改viewer.js文件,直接将defaultUrl.value修改为项目内引用的pdf文件路径。
defaultUrl: {
value: '../../js/plug/pdfjs/web/2019.pdf',
kind: OptionKind.VIEWER
},
方法2:url路径引用。http://127.0.0.1:8020/pdfjs/demo.html?file=20190601.pdf,直接将pdf文件地址作为file的值传给页面,pdf文件须和页面在同一服务器。或者file后跟服务端请求方法,方法返回为pdf文件流。
方法3:推荐。基于方法1修改,将服务端返回的PDF文件流返回给defaultUrl.value
var pdfUrlMine = "";
var PDFData="";
$(function(){
var productparam = {
'productId': localStorage.getItem("productId"),
'loanAcno': sessionStorage.getItem("loanAcno")
};
var params = {
'token': localStorage.getItem("token"),
'param': JSON.stringify(productparam)
};
$.ajax({
type:"post",
async:false,
data: params,
mimeType: 'text/plain;charset=x-user-defined',
url:requestUrl + "/contract/getLoanAgreement",
success:function(data){
PDFData = data;
var rawLength = PDFData.length;
var arrayBf = new ArrayBuffer(rawLength)
var array = new Uint8Array(arrayBf);
for(i = 0; i < rawLength; i++) {
array[i] = PDFData.charCodeAt(i) & 0xff;
}
pdfUrlMine = array;
$("#pmask").remove();
},
error: function(xhr, textStatus) {
$("#pmask").remove();
mui.toast('系统开小差了,请返回重试');
console.log('错误');
console.log(xhr)
console.log(textStatus)
},
complete: function(XMLHttpRequest, status) {
$("#pmask").remove();
if(status == 'timeout') {
mui.toast('提示:网络不稳定');
}
if(status == 'error'){
mui.toast('系统出错了,请刷新后再试');
}
}
});
});
注意:ajax方法中的mimeType: 'text/plain;charset=x-user-defined',
viewer.js文件中需要修改的地方:
// if (origin !== viewerOrigin && protocol !== 'blob:') {
// throw new Error('file origin does not match viewer\'s');
// }
//file = 'file' in params ? params.file : _app_options.AppOptions.get('defaultUrl');
file = 'file' in params ? params.file : pdfUrlMine;
defaultUrl: {
// value: '../../js/plug/pdfjs/web/2019.pdf',
value:pdfUrlMine,
kind: OptionKind.VIEWER
},
cMapUrl: {
// value: '../web/cmaps/',
value: '../../js/plug/pdfjs/web/cmaps/',//根据实际路径修改
kind: OptionKind.API
},
java服务端代码:返回pdf流
@RequestMapping("/agreementPDF/{type}")
public void getRemoteFile(@PathVariable("type") String type, HttpServletResponse response) {
List<AgreementTemplate> list = agreementTemplateMapper.selectAll();
List<AgreementTemplate> collect = list.stream().filter(a -> StringUtils.equals(type, a.getType())).collect(Collectors.toList());
if(ObjectUtils.isEmpty(collect)){
return;
}
AgreementTemplate agreementTemplate = collect.get(0);
InputStream inputStream = null;
try {
try {
File file = new File(agreementTemplate.getUrl());
FileInputStream fileInputStream = new FileInputStream(file);
inputStream = new BufferedInputStream(fileInputStream);
// 取得输入流,并使用Reader读取
int bytesum = 0;
int byteread = 0;
byte[] buffer = new byte[1024];
// 清空response
response.reset();
// 设置response的Header
response.addHeader("Content-Disposition", "attachment;filename=" + new String(file.getName().getBytes()));
OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
response.setContentType("application/octet-stream");
response.setHeader("Access-Control-Allow-Origin","*");
bytesum = 0;
byteread = 0;
buffer = new byte[1024];
while ((byteread = inputStream.read(buffer)) != -1) {
bytesum += byteread;
toClient.write(buffer, 0, byteread);
}
toClient.flush();
inputStream.close();
toClient.close();
} catch (Exception e) {
e.printStackTrace();
inputStream = null;
}
} catch (Exception e) {
e.printStackTrace();
inputStream = null;
}
}