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/...

源码是我曾经实现所有设置的 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，不过这里咱们不探讨这样的策略，而是探讨如何只在前端解决这个问题。依照以下步骤能够解决问题。

  1. 在 viewer.js 中正文掉以下三处代码

    // 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);},

  2. 重写 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.3 调用以上批改

在 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/...

1.在viewer.js中停用跨域判断代码2.重构viewer.js中 webViewerLoader和run函数来解除浏览器的CORS限度3.在iframe标签的src属性中减少file参数，实现PDF文件的动静加载