背景:
公司需要在线预览pdf
之前使用的方法
1.用iframe指向pdf路径:ios可以支持预览,安卓手机会跳转到下载页面。
2.office web app: 可以预览部分pdf文件,方便,代码修改量基本问零,但是当需要密码的pdf会直接,有蒙层遮盖,文件看不了,也不能下载。但是也可以通过修改office web app的样式文件去掉css样式。还有出现了部分pdf损坏的情况,所以不使用office web app预览pdf,而且最新版本也不支持pdf预览。
现在使用的是pdf.js插件
使用方式:
1.XXX/pdfjs/web/viewer.html?file=XXXX
XXX为存放资源的路径,XXXX为文件地址
坑1:我们公司是网页端和移动端都需要预览pdf文件,不要去下载官方推荐的2.8.335版本。该版本安卓手机不能用。经过本人测试,2.5.207可以让移动端可用,附上链接
下载这个包。
坑2:原本的包不支持跨域浏览文件
将viewer.js 中的错误提示注释掉即可,记得viewer.js.map也要处理一下
try {
var viewerOrigin = new URL(window.location.href).origin || 'null';
if (HOSTED_VIEWER_ORIGINS.indexOf(viewerOrigin) >= 0) {
return;
}
var fileOrigin = new URL(file, window.location.href).origin;
//跨域请求错误提示
//if (fileOrigin !== viewerOrigin) {
//throw new Error('file origin does not match viewer\'s');
//}
} catch (ex) {
var message = ex && ex.message;
PDFViewerApplication.l10n.get('loading_error', null, 'An error occurred while loading the PDF.').then(function (loadingErrorMessage) {
PDFViewerApplication.error(loadingErrorMessage, { message: message });
});
throw ex;
}
复制代码
坑3:无法显示电子签章
if (data.fieldType === "Sig") {
data.fieldValue = null;
// _this3.setFlags(_util.AnnotationFlag.HIDDEN);
}
复制代码
坑4:pdf设置横向时,预览pdf没有问题,打印会多打印一页空白页 这是稳定版2.8.335的样式,2.5.207版本的样式有bug。
/* wrapper around (scaled) print canvas elements */
#printContainer > div {
page-break-after: always;
page-break-inside: avoid;
/* The wrapper always cover the whole page. */
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#printContainer canvas,
#printContainer img {
/* The intrinsic canvas / image size will make sure that we fit the page. */
max-width: 100%;
max-height: 100%;
direction: ltr;
display: block;
}
复制代码
公司需求导致改动: 需求1:pdf文件下载名字乱码,改动文件为viewer.js
function getPDFFileNameFromURL(url) {
url = window.location.href;
var defaultFilename = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "document.pdf";
if (typeof url !== "string") {
return defaultFilename;
}
if (isDataSchema(url)) {
console.warn("getPDFFileNameFromURL: " + 'ignoring "data:" URL for performance reasons.');
return defaultFilename;
}
var reURI = /^(?:(?:[^:]+:)?\/\/[^\/]+)?([^?#]*)(\?[^#]*)?(#.*)?$/;
var reFilename = /[^\/?#]+\.pdf\b(?!.*\.pdf\b)/i;
var splitURI = reURI.exec(url);
var suggestedFilename = reFilename.exec(splitURI[1]) || reFilename.exec(splitURI[2]) || reFilename.exec(splitURI[3]);
if (suggestedFilename) {
suggestedFilename = suggestedFilename[0];
suggestedFilename = /printName=(.*?)&/.exec(decodeURIComponent(suggestedFilename));
if (suggestedFilename) {
suggestedFilename = suggestedFilename[1]
}
}
return suggestedFilename || defaultFilename;
}
复制代码