使用pdfjs自带的viewer预览pdf文件可以支持跨域

最新推荐文章于 2025-10-28 10:45:23 发布

原创

最新推荐文章于 2025-10-28 10:45:23 发布 · 1.4w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#pdfjs #跨域 #viewer

本文介绍如何使用xhr2和createObjectUrl解决PDFJS预览跨域文件的问题，通过自定义xhrPdf函数和修改viewer.js，实现跨域PDF文件的本地化加载，从而在网页中顺利预览。

pdfjs默认不支持预览跨域文件，但可以使用xhr2+createObejectUrl解决，具体改动如下：

//添加xhrPdf函数,这个函数写在哪里都可以
function xhrPdf(url,callback) {
 
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);//get请求，请求地址，是否异步
    xhr.responseType = "blob";    // 返回类型blob
    xhr.onload = function () {// 请求完成处理函数
        if (this.status === 200) {

            var blob = this.response;// 获取返回值
            var href = window.URL.createObjectURL(blob);
            callback(href)
            // location.href=href
            // location.href='viewer.html?file='+url

            // blobToDataURL(blob,function(data){
            //     console.log(data)

            // })

        }
    
    // 发送ajax请求
    xhr.send();

}

修改viewer.js里面的内容：
第一处修改为：

window.webViewerLoad=function webViewerLoad(fileUrl) {//调整了此行
  var config = getViewerConfiguration();
  window.PDFViewerApplication = pdfjsWebApp.PDFViewerApplication;
  window.PDFViewerApplicationOptions = pdfjsWebAppO