【附源码】办理pdf.js跨域并从url动态加载pdf文档

源码 · 2024-9-17 15:03:09

0. Abstract

当我们想用PDF.js从URL加载文档时，将会因碰到跨域问题而停止，且是由于会触发了PDF.js和欣赏器的双重CORS block，这篇文章将会先容：①怎样禁用pdf.js的跨域？②怎样绕过欣赏器的CORS加载URL文件？②怎样使用PDF.js动态加载URL文件？
Keywords: PDF.js , CORS , URL , 动态加载 , demo , 源码。
1. Demo和源码

Demo和源码：https://demos.libertynlp.com/#/pdfjs-cors
源码是我已经完成全部设置的 PDF.js 代码，下载后导入你的项目中即可从 url 动态加载pdf。
2. 办理PDF.js跨域

要彻底办理 PDF.js 的跨域问题，让 PDF.js 可以从 url 加载文档，须要办理 PDF.js 自己和欣赏器的双重跨域问题。
2.1 禁用PDF.js跨域

要禁用 PDF.js CORS，须要在 viewer.js 文档中将下面一段代码解释掉，让它失效。
// 原代码 if (origin !== viewerOrigin && protocol !== "blob:") { throw new Error("file origin does not match viewer's"); }// 解释掉上方代码 // if (origin !== viewerOrigin && protocol !== "blob:") { // throw new Error("file origin does not match viewer's"); // }2.2 绕过欣赏器跨域

要办理欣赏器 URL 文件跨域的问题，可以通事后端服务器将PDF 文件转换成流文件的方式返回给 PDF.js，不外这里我们不讨论如许的战略，而是讨论怎样只在前端办理这个问题。按照以下步调可以办理问题。

在 viewer.js 中解释掉以下三处代码，然后重写加载 PDF 文件的函数 webViewerLoad 和 Run函数。

// inactivate follow original code in viewer.js//first placefunction webViewerLoad() { var config = getViewerConfiguration(); window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication; window.PDFViewerApplicationOptions = pdfjsWebAppOptions.AppOptions; var event = document.createEvent("CustomEvent"); event.initCustomEvent("webviewerloaded", true, true, {}); document.dispatchEvent(event); pdfjsWebApp.PDFViewerApplication.run(config);}//second placeif (document.readyState === "interactive" || document.readyState === "complete") { webViewerLoad();} else { document.addEventListener("DOMContentLoaded", webViewerLoad, true);}//third placerun: function run(config) { this.initialize(config).then(webViewerInitialized);},

重写 webViewerLoad 和 Run 函数

// 重写 webViewerLoad 函数window.webViewerLoad = function webViewerLoad(fileUrl) { var config = getViewerConfiguration(); window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication; window.PDFViewerApplicationOptions = pdfjsWebAppOptions.AppOptions; var event = document.createEvent('CustomEvent'); event.initCustomEvent('webviewerloaded', true, true, {}); document.dispatchEvent(event); if (fileUrl) {       config.defaultUrl = fileUrl; } pdfjsWebApp.PDFViewerApplication.run(config);}//rewrite run function//modeify for browser CORSrun: function run(config) { var _that = this; //add judgement if (config.defaultUrl) {       _app_options.AppOptions.set('defaultUrl', config.defaultUrl) } _that.initialize(config).then(function() {       webViewerInitialized() });},2.2.2 调用以上修改

在 viewer.html 中新增一个函数，目标是在加载页面时调用修改过的 webViewerLoad 函数。
< script type = "text/javascript" > window.onload = function() {       var pdfUrl = "https://heritagesciencejournal.springeropen.com/track/pdf/10.1186/s40494-021-00620-2.pdf";       webViewerLoad(pdfUrl); }</script>3. 从URL动态加载PDF

修改 viewer.html 中的函数，根据 viewer.html 地点 iframe 标签 src 中携带的 PDF url 加载文件。
<script type = "text/javascript" > window.onload = function() {       var all_href = location.href;       var file_id = all_href.split('?')[1];       var pdfUrl = file_id.split('=')[1];       // var pdfUrl='https://fireflycos.libertynlp.com/firefly-static/new_shouce.pdf';       webViewerLoad(pdfUrl); }</script>当在项目中使用 iframe 引用 PDF.js 的 viewer.html 时，只须要修改 *src=”viewer.html?file=” *反面的 PDF Url地址就可以了。也就是改变 <iframe> 的 src 属性值就可以实现动态加载PDF文档。
//complete test.html<!DOCTYPE html><html> <head>       <meta charset="utf-8">       <title></title> </head> <body data-rsssl=1 data-rsssl=1>       <iframe loading="lazy" id="pdf_container" src="viewer.html?file=https://fireflycos.libertynlp.com/firefly-static/new_shouce.pdf"       frameborder="0" width="100%" height="800px"></iframe> </body></html>4. 总结

想要 PDF.js 通过 URL 加载文件，须要修改以下几个地方。如果想看看结果或者直接使用我已经修改好的版本，可以到Demo和源码网址：https://demos.libertynlp.com/#/pdfjs-cors
1.在viewer.js中停用跨域判断代码2.重构viewer.js中 webViewerLoader和run函数来清除欣赏器的CORS限定3.在iframe标签的src属性中增长file参数，实现PDF文件的动态加载

【附源码】办理pdf.js跨域并从url动态加载pdf文档

所属分类: 问答交流

新帖推荐: 30日

推荐作品