PDF.JS 移动端开发

pdf.js  2.5版本开发，网上搜的大多是1.x版本的写法，查看了列子 只有 加载1页的方法，没有加载全部的列子，思路就是写个循环把每一页都加载到动态创建的canvas里。

下面是加载所有页PDF,JQUERY 请自行引用

按照1.x版本的写法  但是引用的是2.x版本的回报 jsPDF is not defined 错。

先下载 pdf.js    pdf.work.js   下载地址 https://github.com/mozilla/pdf.js

//引用

 <script src="../../Scripts/jspdf/pdf.min.js"></script>

//html

<div id="pdfDiv" style="margin:48px 3px 0px 3px">

</div>
//js

<script>

 pdfjsLib.GlobalWorkerOptions.workerSrc = '/Scripts/jspdf/pdf.worker.min.js';
        //
        // Asynchronous download PDF
        //

        var url ='aaa.pdf';
        var loadingTask = pdfjsLib.getDocument(url);

        //如遇到中文不显示，需要引入 cmaps

        //var CMAP_URL = 'Scripts/jspdf/cmaps/';

       //   var loadingTask = pdfjsLib.getDocument({
      //              url: url, //
     //               cMapUrl: CMAP_URL,
    //                cMapPacked: true
    //            })

        loadingTask.promise.then(function (pdf) {
            pdfDoc = pdf;
            //
            // Fetch the first page
            //
            for (var i = 0; i < pdfDoc.numPages; i++) {
                pdf.getPage(i + 1).then(function (page) {
                    var scale = 1.5;
                    var viewport = page.getViewport({ scale: scale, });

                    //
                    // Prepare canvas using PDF page dimensions
                    //
                    var canvas = $('<canvas  style="direction: ltr; border: 0px solid black;  box-shadow: 0 1px 2px rgb(0 0 0 / 30%); "></canvas>');
                    $("#pdfDiv").append(canvas);
                    var context = canvas[0].getContext('2d');
                    canvas[0].height = viewport.height;
                    canvas[0].width = viewport.width;

                    //
                    // Render PDF page into canvas context
                    //
                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport,
                    };
                    page.render(renderContext);
                });
            }

 

</script>

 

如要引入 cmaps  需在 web.config 里引入 

  <!--<system.webServer>

        <staticContent>
          <mimeMap fileExtension=".apk" mimeType="application/vnd.android.package-archive" />
          <mimeMap fileExtension=".properties" mimeType="text/x-java-properties" />
          <mimeMap fileExtension=".bcmap" mimeType="image/svg+xml" />
        </staticContent>
  </system.webServer>  -->