PDF.js 分片下载的介绍2:分片下载demo
上一个章节，简要说了以下分片下载的几个特性。今天主要用示例说明一下pdf.js分片下载。
服务器环境：
php7.2
nginx 1.14
ubuntu 18.04
测试浏览器:谷歌浏览器 70.0.3538.110（
第一个场景，直接使用pdf 文件
1.1 代码如下：注意路径使用的是pdf 文件的物理路径
$filePath = ‘…/doc/big.pdf’;
这里是举例，这样作有一个明显的缺点，就是容易被盗链
getDocument 方法中的 rangeChunkSize 参数，就是设置分块大小，默认是64k,可以修改这个数字，来改变
这个例子使用的 1664k ,1m 左右来分片，方便测试。您可以根据具体情况，来调整
PDFJS.getDocument({url:url,rangeChunkSize:6553616,disableAutoFetch:0}).
<html><head><title>pdf.js展示1，上一页，下一页</title></head><h1>PDF.js Previous/Next example</h1><div><button id="prev">Previous</button><button id="next">Next</button> <span>Page: <span id="page_num"></span> / <spanid="page_count"></span></span></div><canvas id="the-canvas"></canvas><script src="../js/pdfjs/pdf.js"></script><script src="../js/pdfjs/pdf.worker.js"></script><script>var url = '../doc/big.pdf';var pdfDoc = null,pageNum = 1,pageRendering = false,pageNumPending = null,scale = 0.8,canvas = document.getElementById('the-canvas'),ctx = canvas.getContext('2d');/*** Get page info from document, resize canvas accordingly, and render page.* @param num Page number.*/function renderPage(num) {pageRendering = true;// Using promise to fetch the pagepdfDoc.getPage(num).then(function (page) {var viewport = page.getViewport(scale);canvas.height = viewport.height;canvas.width = viewport.width;// Render PDF page into canvas contextvar renderContext = {canvasContext: ctx,viewport: viewport};var renderTask = page.render(renderContext);// Wait for rendering to finishrenderTask.promise.then(function () {pageRendering = false;if (pageNumPending !== null) {// New page rendering is pendingrenderPage(pageNumPending);pageNumPending = null;}});});// Update page countersdocument.getElementById('page_num').textContent = num;}/*** If another page rendering in progress, waits until the rendering is* finised. Otherwise, executes rendering immediately.*/function queueRenderPage(num) {if (pageRendering) {pageNumPending = num;} else {renderPage(num);}}/*** Displays previous page.*/function onPrevPage() {if (pageNum <= 1) {return;}pageNum--;queueRenderPage(pageNum);}document.getElementById('prev').addEventListener('click', onPrevPage);/*** Displays next page.*/function onNextPage() {if (pageNum >= pdfDoc.numPages) {return;}pageNum++;queueRenderPage(pageNum);}document.getElementById('next').addEventListener('click', onNextPage);/*** Asynchronously downloads PDF.*/PDFJS.getDocument({url:url,rangeChunkSize:65536*16,disableAutoFetch:0}).then(function(pdfDoc_) {pdfDoc = pdfDoc_;document.getElementById('page_count').textContent = pdfDoc.numPages;// Initial/first page renderingrenderPage(pageNum);});</script></html>
1.2今天第一加载：发现没有出现分片效果。如果您也遇到这种情况，不要着急，很大程度是因为浏览器缓存
1.3 在浏览器中，安Ctrl+alt+delte 键，清除缓存
1.4 清除缓存后，再次刷新页面，发现分片下载功能出现了。
后台代码<?php
$filePath = '../doc/big.pdf';//普通的方式处理包装pdf文件
download_file($filePath);function download_file($file, $fname = 'chunk.pdf')
{header("Content-Type: application/octet-stream");header("Content-Disposition: attachment;filename=$fname");echo(file_get_contents($file));
}
前台js 调用代码
。。。。。var url = 'download.php';var pdfDoc = null,pageNum = 1,pageRendering = false,pageNumPending = null,scale = 0.8,canvas = document.getElementById('the-canvas'),ctx = canvas.getContext('2d');。。。。
2.2 经过清理缓存，发现无法达到分片的效果。
初步总结如下，常规的附件处理方式，会影响分片下载的效果
场景3：使用php 结合httprange,实现分片的效果
代码的核心是，增加head 头，开启分片 Header("Accept-Ranges: bytes"); 至于 Http range 如何计算，就比较繁琐了，这里就不详细介绍了。有兴趣的可以去百度
<?php
$filePath = '../doc/big.pdf';//分片下载
chunk_download_file($filePath);/*** 分篇下载的汉书** @param $file* @param $fname*/
function chunk_download_file($file, $fname = 'chunk.pdf')
{$fhandle = fopen($file, 'rb');//文件句柄$fsize = filesize($file);//文件大小//断点续传和整个文件下载的判断，支持多段下载if (!empty($_SERVER['HTTP_RANGE'])) {$range = str_replace("=", "-", $_SERVER['HTTP_RANGE']);$match = explode("-", $range);$start = $match[1];$end = !empty($match[2]) ? $match[2] : $fsize - 1;} else {$start = 0;$end = $fsize - 1;}if (($end - $start) < ($fsize - 1)) {fseek($fhandle, $start);header("HTTP/1.1 206 Partial Content");header("Content-Length: " . ($end - $start + 1));header("Content-Range: bytes " . $start . "-" . $end . "/" . $fsize);} else {header("HTTP/1.1 200 OK");header("Content-Length: $fsize");Header("Accept-Ranges: bytes");header("Content-Range: bytes " . $start . "-" . $end . "/" . $fsize);}header("Content-Type: application/octet-stream");header("Content-Disposition: attachment;filename=$fname");if (!feof($fhandle)) {set_time_limit(0);$buffer = fread($fhandle, $end - $start + 1);echo $buffer;flush();ob_flush();}
}
demo 下载路径：
https://download.csdn.net/download/niedewang/10804164
3.2 清理调浏览器缓存，发现这种方式可以达到分片下载的效果
经过测试，谷歌浏览器支持的很好，如上图所示，截图就是使用的谷歌浏览器。
但是firefox 在这种场景下，分片效果不理想。具体原因未知
简要的总结
1：前期承诺的demo 放出来了，blog貌似会清理连接地址，不知道是否会删除
2：使用pdf 真实文件路径，分片兼容性最好。但是地址容易泄漏
3：如果使用php 处理，一般的处理程序，不能达到分片效果。需要结合http range特性，但是不知道什么原因，firefox测试下来，效果不好。谷歌浏览器支持的较好，好消息是谷歌浏览器现在占用量是最大的。
4：后面有时间了，会介绍以下使用 x-sendfile 的方式处理附件，无论性能还是兼容性都比php 处理要好
---------------------
作者：只看远方
来源：CSDN
原文：https://blog.csdn.net/niedewang/article/details/84576969
版权声明：本文为博主原创文章，转载请附上博文链接！
转载于:https://www.cnblogs.com/pangguoming/p/10318534.html
PDF.js 分片下载的介绍2:分片下载demo相关推荐
- pd.fjs分片下载的介绍2:分片下载demo
上一个章节,简要说了以下分片下载的几个特性.今天主要用示例说明一下pdf.js分片下载. 服务器环境: php7.2 nginx 1.14 ubuntu 18.04 测试浏览器:谷歌浏览器 70.0. ...
- pdf.js使用方法
应各位博友要求已经取消付费 2022.3.20 项目中 显示 pdf 的功能,浏览过不少的技术帖,都不太理想,花了点时间研究了下pdf.js正确使用方法,总结下:1.防止自己忘记 2.工作留有痕迹 3 ...
- 如何在项目中使用pdf.js查看PDF文件
最近在做后台管理类的系统,需要在web页面阅读pdf文件.发现一个很好用的插件 pdf.js,简单的介绍一下 官方文档地址:http://mozilla.github.io/pdf.js/ 在线演示地 ...
- 初次体验PDF.JS，非常好用的pdf前台包
客户死活要用IE,IE这破烂仗着他老爹微软这几年的影响力,在各大公司占了浏览器的重要职位. IE就连自己打开pdf也不会,只能靠外援他爹的盘友adobe,adobe自以为有点料,一打开就要上头条,给个 ...
- pdf在线预览解决方案——pdf.js使用
业务背景 在C端的前端项目中,针对用户会有多种规则需要展示,之前的处理方案是将这些规则写成一个个的静态页面,用户来访问这些页面.但如果这些规则需要变更的话,就需要前端修改对应的规则页面的文案,重新发版 ...
- 使用pdf.js不依赖任何activeX控件
使用pdf.js可以直接在浏览器上浏览PDF文件,而且不依赖任何activeX控件~ github上下载生成好的pdf.js工程 本机项目:PDFPrintTest下demo viewer.js中要增 ...
- Springboot + layui + FTP文件上传删除 + HTTP文件下载预览 + pdf.js文件预览（项目实战总结）
文件管理 0.需求及前言 1.前端,上传按钮嵌入数据表格中 2.利用IIS部署FTP文件服务器 3.后台FTP连接和文件操作 4.FTP遇到的问题和解决方案 5.预览PDF文件V1.0:FTP+临时文 ...
- uniapp在线预览pdf文件流pdf.js
背景:uniapp 开发微信公众号,需要加载显示后端返回的pdf文件流,后端接口返回的数据如下: 使用pdf.js解决: 1.官网下载pdf.js 注意:若页面空白,无报错信息,可以尝试下载别的版本的 ...
- 实现pdf.js批注功能（高亮文本/下划线/导入导出）
我开发了pdf.js增加注释的最佳实现方案,仅使用了PDF.js dist版本,可以十分方便的集成到任意web项目中. Demo及源码 Demo和源码获取方式在:https://demos.liber ...
最新文章
- [多级联动下拉选择框]和[Tree to Tree]续——让他们可以设置默认值
- iOS UI基础-6.0 UIActionSheet的使用
- Pytorch使用过程错误与解决 -汇总~
- 移动端像素概念，viewport，适配
- （41）System Verilog输出变量时序延迟
- （转）基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts
- Linux 软件包管理
- 多数据源报表解析之简单多源报表
- WINDOWS编译OpenJDK8的问题及解决办法
- spring封装VerifyCodeUtil工具类，生成图片验证码
- 黑苹果 声卡驱动 ID注入
- Oracle11g Dataguard配置
- 测试工具大全http://blog.csdn.net/vincetest/archive/2006/12/12/1440353.aspx
- String 源码浅析————终结篇
- 最全的网站推广方案(SEO)
- Web渗透攻击之vega
- 2010年西北工业大学机试第二题
- servlet+javabean+jdbc+mysql基于MVC模式的课件管理系统，有三个表的增删改查和课件搜索、课件上传、课件下载功能， 具体功能请看界面上的导航条
- python怎样使用各个日期赤纬_天文数据处理笔记之python（3）
- 我有罪我用了1下午时间终于无师自学用C#开发了俺的领先个Android 浏览器APP我对不起java 社区