mozilla pdfjs跨域问题及压缩优化

1 篇文章 0 订阅

#mozilla pdfjs介绍
moziila pdfjs是一款优秀的pdf在线预览、导出、打印插件,但在使用中遇到了跨域问题。

#mozilla pdfjs跨域设置
在pdf.js/web/app.js中,1420行,找到

let viewerOrigin = new URL(window.location.href).origin || 'null';
	  
//添加这一行    
//修改,将当前工程的origin纳入pdfjs的宿主域
HOSTED_VIEWER_ORIGINS.push(viewerOrigin);

if (HOSTED_VIEWER_ORIGINS.indexOf(viewerOrigin) >= 0) {
// Hosted or local viewer, allow for any file locations
return;
}

这样就是允许所有与本域名不同的请求,客户端js放开了限制,但是服务器端还需要配置CORS(cross origin resource share),请求是发送到腾讯云所以服务端设置可以参考这篇文档

#pdfjs文件过大
pdf.worker.js过大问题,下载pdfjs源代码,npm安装依赖后,使用gulp minified 命令压缩js,在build文件夹下生成minified文件夹就是压缩后的,未压缩前1M多,压缩后600多KB
这里写图片描述

#参考
https://github.com/mozilla/pdf.js
https://github.com/mozilla/pdf.js/issues/7153
https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#can-i-load-a-pdf-from-another-server-cross-domain-request

要实现PDFJS跨域加载PDF,你需要进行一些配置和调整。以下是一些步骤: 1. 在服务器上启用CORS(跨源资源共享):您需要在服务端配置CORS,以允许从不同域加载PDF文件。具体的CORS配置方法取决于您使用的服务器技术。例如,对于Apache服务器,您可以在.htaccess文件中添加以下内容: ``` Header set Access-Control-Allow-Origin "*" ``` 这将允许来自任何域的请求加载PDF文件。请注意,使用通配符* 可能会存在安全风险,因此您可以根据需要选择更具体的域。 2. 调整PDFJS的配置:PDFJS提供了一些配置选项,可以通过修改它们来实现跨域加载。您可以在加载PDF之前设置以下配置: ```javascript pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://example.com/pdf.worker.js'; ``` 将上述代码中的URL替换为您的PDFJS Worker脚本的URL。这将确保Worker脚本可以正常加载。 3. 加载跨域的PDF文件:在您的前端代码中,使用PDFJS加载PDF文件时,确保指定完整的URL路径。例如: ```javascript const url = 'https://example.com/path/to/pdf.pdf'; const loadingTask = pdfjsLib.getDocument(url); ``` 通过提供完整的URL路径,PDFJS将能够正确地加载跨域的PDF文件。 请注意,如果PDF文件本身没有正确配置CORS,您可能仍然会遇到加载问题。在这种情况下,您需要确保PDF文件的服务器端也正确配置了CORS。 希望这些步骤对您有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值