原因一:CORS问题,需要修改文件服务器上的配置,允许跨域请求文件资源
原因二:文件存储服务器端的配置参数问题,没有支持分片返回数据,导致前端接收到的数据只有一部分(一个206请求),需要在文件服务器的http服务配置项中 开启或暴露以下Headers(Access-Control-Expose-Headers): content-range, content-length, accept-ranges
建议如下:
- 如果是原因一导致的,则只能通过目标服务器对跨域请求的放行来解决问题;
- 如果是原因二导致的,建议联系文件服务器的运维方,修改相关配置项,让其支持文件的分片请求,但如果文件服务器端无法配置分片请求的相关参数,则可以考虑使用loadPDFDocByHttpRangeRequest和openPDFByFile接口配合的方式规避该问题,示例代码如下:
try{
var fileURL = "http://domain/filePATH/xxxx.pdf";
//将网络PDF加载到浏览器内存中
var pdfdoc = await pdfui.loadPDFDocByHttpRangeRequest({range: {url: fileURL}});
//如果PDF文件流正常,则在PDFUI实例中将文件渲染展示出来
pdfui.reopenPDFDoc(pdfdoc);
}catch(error){
//如果加载PDF文件流时不正常,则捕获异常,根据异常的分类,做出对应的应用层处理
console.log(error); //error=2 format error , error=3 wrong password , error=11 security handler error
if(error.code == 2){
//文件服务器可能不支持分片请求,改为先获取完整文件流,再在PDFUI实例中渲染展示文件的方式进行
fetch(fileURL).then(function(response) {
response.arrayBuffer().then(function(buffer) {
pdfui.openPDFByFile(buffer);
})
})
}else if(error.code == 3){
console.log("please input a password of the file");
}
}