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);
    }
}

results matching ""

    No results matching ""