0动态加载pdf文档。Abstract当我们想使用PDF.js从URL加载文档时,会因为跨域问题而中断,并且会触发PDF.js和浏览器的双CORS阻塞。本文将介绍:①如何关闭pdf.js的跨域?②如何绕过浏览器的CORS加载URL文件?②如何使用PDF.js动态加载URL文件?关键词:PDF.js、CORS、URL、动态加载、demo、源代码。1.Demo及源码Demo及源码:https://demos.libertynlp.com/...源码是我完成所有设置后的PDF.js代码。下载后,将其导入到您的项目中,以从url动态加载pdf。2、解决PDF.js跨域要彻底解决PDF.js的跨域问题,让PDF.js能够从url加载文档,就需要解决PDF.js本身的双重跨域问题和浏览器。2.1禁用PDF.js跨域要禁用PDF.jsCORS,需要在viewer.js文档中注释掉下面这段代码,使其失效。//原始代码if(origin!==viewerOrigin&&protocol!=="blob:"){thrownewError("fileorigindoesnotmatchviewer");}//注释掉上面的代码//if(origin!==viewerOrigin&&protocol!=="blob:"){//thrownewError("fileorigindoesnotmatchviewer's");//}2.2绕过浏览器跨域解决浏览器URL文件跨域问题,可以将PDF文件转为流文件,通过后端服务器返回给PDF.js,但是这里我们不会讨论这样的策略,只在前端如何解决这个问题。请按照以下步骤解决问题。在viewer.js中注解掉以下三处代码//inactivate按照viewer.js中的原始代码//第一个地方functionwebViewerLoad(){varconfig=getViewerConfiguration();window.PDFViewerApplication=pdfjsWebApp.PDFViewerApplication;window.PDFViewerApplicationOptions=pdfjsWebAppOptions.AppOptions;varevent=document.createEvent("CustomEvent");event.initCustomEvent("webviewerloaded",true,true,{});文档.dispatchEvent(事件);pdfjsWebApp.PDFViewerApplication.run(config);}//第二名if(document.readyState==="interactive"||document.readyState==="complete"){webViewerLoad();}else{document.addEventListener("DOMContentLoaded",webViewerLoad,true);}//第三处run:functionrun(config){this.initialize(config).then(webViewerInitialized);},重写webViewerLoad并运行任数//重写webViewerLoad任数window.webViewerLoad=functionwebViewerLoad(fileUrl){varconfig=getViewerConfiguration();窗口.PDFViewerAppapplication=pdfjsWebApp.PDFViewerApplication;window.PDFViewerApplicationOptions=pdfjsWebAppOptions.AppOptions;varevent=document.createEvent('CustomEvent');event.initCustomEvent('webviewerloaded',true,true,{});文档.dispatchEvent(事件);如果(fileUrl){config.defaultUrl=fileUrl;}pdfjsWebApp.PDFViewerApplication.run(config);}//重写运行函数//为浏览器修改CORSrun:functionrun(config){var_that=this;//添加判断if(config.defaultUrl){_app_options.AppOptions.set('defaultUrl',config.defaultUrl)}_that.initialize(config).then(function(){webViewerInitialized()});},2.3调用以上修改在viewer.html中添加了一个函数,在页面加载时调用修改后的webViewerLoad函数在项目中使用iframe引用PDF.js查看viewer.html时,只需要修改src="viewer.html?file="后的PDFUrl地址即可。即改变
