前端pdf.js在线预览大坑合集 |
您所在的位置：网站首页 › pdf前端预览 › 前端pdf.js在线预览大坑合集 |
前端pdf.js在线预览大坑合集
|
背景：
公司需要在线预览pdf 之前使用的方法1.用iframe指向pdf路径：ios可以支持预览，安卓手机会跳转到下载页面。 2.office web app: 可以预览部分pdf文件，方便，代码修改量基本问零，但是当需要密码的pdf会直接，有蒙层遮盖，文件看不了，也不能下载。但是也可以通过修改office web app的样式文件去掉css样式。还有出现了部分pdf损坏的情况，所以不使用office web app预览pdf，而且最新版本也不支持pdf预览。 使用方式： 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; } 复制代码 |
【本文地址】
今日新闻 |
推荐新闻 |