就这几天遇到的一个问题:

pdf加载有时候显示出来有有时候显示不了,就是那个页码一直在转圈圈,里面的pdf页面文件也一直在转圈圈,然后有的pdf能显示有的pdf显示不了,有的文件大有的文件小(有时候大的能显示晓得显示不了,所以我觉得应该和文件大小无关)

pdfjs显示状态码为failed解决(pdfjs分片显示)(pdfjs显示一直转圈有时能显示有时显示不了)

试过很多了,我中间甚至以为是导航栏的问题,这个导航栏

pdfjs显示状态码为failed解决(pdfjs分片显示)(pdfjs显示一直转圈有时能显示有时显示不了)

pdfjs显示状态码为failed解决(pdfjs分片显示)(pdfjs显示一直转圈有时能显示有时显示不了)                         pdfjs显示状态码为failed解决(pdfjs分片显示)(pdfjs显示一直转圈有时能显示有时显示不了)

然后看了状态码才看到显示的是failed(失败)

状态码:

pdfjs显示状态码为failed解决(pdfjs分片显示)(pdfjs显示一直转圈有时能显示有时显示不了)

最后找了一篇文章,分片下载

路径:

如何提高pdf.js加载速度之一分片下载

用了里面的方法:

PDFJS.getDocument({url:url,rangeChunkSize:65536*16}).then(function(pdfDoc_) {
        pdfDoc = pdfDoc_;
        document.getElementById('page_count').textContent = pdfDoc.numPages;

        // Initial/first page rendering
        renderPage(pageNum);

 }) 

起初我也不知道这段代码加在哪里,然后看到下面的评论是加在viewer.js里面我就试着加了下

pdfjs显示状态码为failed解决(pdfjs分片显示)(pdfjs显示一直转圈有时能显示有时显示不了)

但是里面的url和pdfDoc报错,我就给改成了

pdfjs显示状态码为failed解决(pdfjs分片显示)(pdfjs显示一直转圈有时能显示有时显示不了)

反正吧我也不知道放这里对不对,但是这个js文件里就只有这一个function有url参数,然后我抱着试下的心态重新运行了还真对了,返回的状态码期初是304(我寻思着这和返回206不对啊,为此还百度了下这个意思,反正吧最后不影响)

pdfjs显示状态码为failed解决(pdfjs分片显示)(pdfjs显示一直转圈有时能显示有时显示不了)

pdfjs显示状态码为failed解决(pdfjs分片显示)(pdfjs显示一直转圈有时能显示有时显示不了)

之前显示304到最后不知我又动了什么又显示206了

pdfjs显示状态码为failed解决(pdfjs分片显示)(pdfjs显示一直转圈有时能显示有时显示不了)

总的来说,两种状态码是都能成功就是了。

ok

总结:

1:pdf.js 有流媒体属性。简单的说,就是只要web服务器支持,浏览器支持,他可以像看优酷视频一样,边播放边下载。简单的说法是:支持分片下载

2:前置条件 
第一:web服务器必须要能支持,分片下载。nginx 1.09 版本已上默认的就支持了 
第二:浏览器支持,经过测试大姐姐的测试,她给我的反馈是,火狐、谷歌、IE、edge、360极速目前都能打开。

3、设置分片大小

rangeChunkSize : 就是分块大小,默认:65536(64k)。默认太小了,这个文档100m,需要有1000多个请求,才能下载完毕。所以我调成了65536*16(1024k也就是1mb),这里你可以看到第一次显示的大小是1mb

pdfjs显示状态码为failed解决(pdfjs分片显示)(pdfjs显示一直转圈有时能显示有时显示不了)

代码:(我也不知道这段代码加在哪里,反正我是加在viewer.js里面的,目前问题已解决)

PDFJS.getDocument({url:url,rangeChunkSize:65536*16}).then(function(pdfDoc_) {
        pdfDoc = pdfDoc_;
        document.getElementById('page_count').textContent = pdfDoc.numPages;

        // Initial/first page rendering
        renderPage(pageNum);

 }) 

嗯。。。。测试说,速度比以前快了,其实这个我是真没看出来快了,好了, 就这样,小随笔

 

相关文章:

  • 2021-10-10
  • 2021-07-22
  • 2021-12-13
  • 2022-02-27
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-10-22
  • 2022-12-23
  • 2022-12-23
  • 2021-08-21
  • 2022-02-05
  • 2021-11-26
相关资源
相似解决方案