pdf.js 异步获取pdf流文件显示,支持移动端,微信

简单说一说碰到的坑

公司最近在有一个需求就是pdf要现在预览,所以就找到了pdf.js的插件,开始用了它的viewr.js,这个是美化了预览页面,但是在移动端safari会出问题,所以只能放弃,自己写喽

下面贴上代码,注释写清楚了就不一一解释了,希望我走的坑你不要再趟一次

** 先看一下上线版本地址,可以移动端打开查看 **

var param = function(name) { //一个获取url中参数的方法
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg); //匹配目标参数
    if (r != null) return unescape(r[2]);
    return null; //返回参数值
};
var PDFData = "";
var currPage = 1; //当前页数从1开始
var numPages = 0;
var thePDF = null;
$.ajax({
    type: "post",
    mimeType: 'text/plain; charset=x-user-defined',
    url: param("pdfUrl"),
    //url中要有 pdfUrl 参数和值,值为pdf流地址
    success: function(data) {
        if (data) {
            PDFData = data;
            var rawLength = PDFData.length;
            //转换成pdf.js能直接解析的Uint8Array类型,见pdf.js-4068
            var array = new Uint8Array(new ArrayBuffer(rawLength));
            for (i = 0; i < rawLength; i++) {
                array[i] = PDFData.charCodeAt(i) & 0xff;
            }
            PDFJS.getDocument(array).then(function(pdf) {
                require('module/common/dialog').hideLoading();
                //将pdf对象赋值到全局变量,能够在其他方法中使用
                thePDF = pdf;
                //获取一共有多少页
                numPages = pdf.numPages;
                //从第一页开始
                pdf.getPage(1).then(handlePages);
            });
        } else {
            console.log("pdf请求失败")
        }
    }
});
function handlePages(page) {
    //获取全尺寸pdf
    var viewport = page.getViewport(2);
    var canvas = document.createElement("canvas");
    var canvasCon = document.createElement("div");
    canvas.id = "canvas_" + currPage;
    canvasCon.id = "canvasCon_" + currPage;
    canvasCon.className = "canvasCon";
    var winRatio = ($(window).width() / viewport.width) * 0.9;
    $(canvas).css({
        "transform": "scale(" + winRatio + ")",
        "webkitTransform": "scale(" + winRatio + ")",
        "left": $(window).width() * 0.05
    });
    $(".canvasCon").css({
        'height': viewport.height * winRatio
    });
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    //在canvas上绘制
    page.render({
        canvasContext: context,
        viewport: viewport
    });
    //在页面中插入画布
    document.body.appendChild(canvasCon);
    document.getElementById("canvasCon_" + currPage).appendChild(canvas);
    //开始下一页到绘制
    currPage++;
    if (thePDF !== null && currPage <= numPages) {
        thePDF.getPage(currPage).then(handlePages);
    }
}

 

经过一段时间,发现大家很多连基本的pdf.js的用法都不太了解,这里放出一个例子

http://0313.name/demo/pdfjs_helloworld/helloworld.html

拿去不谢

如有问题,下面有赞赏码,有求必应~

《pdf.js 异步获取pdf流文件显示,支持移动端,微信》有35个想法

  1. 好巧,我也是小米员工。最近也在看这个Pdf.js,体验了一下你的demo,很赞奥。希望能跟你学习一下,我的wechat:15910688649

  2. 你好,这个demo貌似是将整个 pdf 文件预加载好然后通过 js 分页展示的,每次点击翻页好像不会 ajax 请求服务器获取对应的页

  3. pdf.js能不能打开本地文件啊,是需要配置什么吗?因为我们要做一个APP里面的pdf都是本地的,要打开指定page。

  4. 能否做到不预先加载整个pdf!翻到那页就加载那页!预加载耗费带宽啊我的微信号13854669201,
    我网站用到了www.ls123.site

发表评论

邮箱地址不会被公开。 必填项已用*标注