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

最新推荐文章于 2025-06-21 13:47:25 发布

会飞的IT

最新推荐文章于 2025-06-21 13:47:25 发布

阅读量1.4w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： js web 全栈技术开发文章标签： pdfjs 跨域 viewer

本文链接：https://blog.youkuaiyun.com/wangzhikui1/article/details/87817192

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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