如何解决pdf.js跨域从url动态加载pdf文档

摘要

当我们想用PDF.js从URL加载文档时,将会因遇到跨域问题而中断,且是因为会触发了PDF.js和浏览器的双重CORS block,这篇文章将会介绍:①如何禁用pdf.js的跨域?②如何绕过浏览器的CORS加载URL文件?②如何使用PDF.js动态加载URL文件?

关键词 : PDF.js , CORS , URL , 动态加载

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 ,不过这里我们不讨论这样的策略,而是讨论如何只在前端解决这个问题。按照以下步骤可以解决问题。

  1. viewer.js 中注释掉以下三处代码,然后重写加载 PDF 文件的函数 webViewerLoadRun函数。

    // 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.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.jsviewer.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文件的动态加载
相关推荐
奋飛5 分钟前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
sunbyte14 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟22 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor23 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter24 分钟前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
呆呆的心30 分钟前
JavaScript 深入理解闭包与柯里化:从原理到实践 🚀
javascript·面试
快起来别睡了31 分钟前
看完这篇文章,你就知道什么是proxy
javascript
请你吃div32 分钟前
JavaScript 实用函数大全(超实用)
前端·javascript·面试
一个水瓶座程序猿.33 分钟前
Vue3 中使用 Vueuse
前端·javascript·vue.js
夏梦春蝉34 分钟前
ES6从入门到精通:Symbol与迭代器
前端·javascript·es6