关于pdf.js:附源码解决pdfjs跨域并从url动态加载pdf文档

68次阅读

共计 3373 个字符,预计需要花费 9 分钟才能阅读完成。

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 place
    function 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 place
    if (document.readyState === "interactive" || document.readyState === "complete") {webViewerLoad();
    } else {document.addEventListener("DOMContentLoaded", webViewerLoad, true);
    }
    
    //third place
    run: 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 CORS
    run: 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 文件的动静加载 

正文完
 0