html页面显示pdf渲染成canvas案例以及html显示pdf遇到的跨域问题的解决方案

一，html页面显示pdf渲染成canvas案例
如下图所示：

1，引入pdf.js

<script src="../js/htmlshowPDF/build/pdf.js"></script>
<script src="../js/htmlshowPDF/build/pdf.worker.js"></script>

2,在显示pdf的案列上添加div

 <div id="the-canvas"></div>

3，对应的js代码如下

function pdf(pdfurl) {
        pdfxuan=true;
        var url="/pdfClass.php/show/pdf?url=http:" +pdfurl;
        pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        scale= window.innerWidth / 1200,
        PDFJS.workerSrc = '../js/pdf.worker.js';
        

        function renderPage() {
            //pageRendering = true;
            document.getElementById('the-canvas').innerHTML='';
            for (var i = 1; i <= pdfDoc.numPages; i++) {
                // 获取第i页
                pdfDoc.getPage(i).then(function getPageHelloWorld(page) {
                    var viewport = page.getViewport(scale);
                    var canvas = document.createElement('canvas');
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    document.getElementById('the-canvas').appendChild(canvas);
                    page.render({canvasContext: context, viewport: viewport});
                });
            }
        }

        PDFJS.getDocument(url).then(function getPdfHelloWorld(pdfDoc_) {
            $('.loading').hide();
            pdfDoc = pdfDoc_;
            for (var i = 1; i <= pdfDoc.numPages; i++) {
                // 获取第i页
                pdfDoc.getPage(i).then(function getPageHelloWorld(page) {
                    var viewport = page.getViewport(scale);
                    var canvas = document.createElement('canvas');
                    var context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    document.getElementById('the-canvas').appendChild(canvas);
                    page.render({canvasContext: context, viewport: viewport});
                });
            }
        });
    }

4,pdf函数的执行时机自己找合适的位置添加一下，如加载完成的时候

5，案例中请求的后端接口问题如下，php中的方法

  public function pdf($url){
        $url = urldecode($url);
        $arr = explode('/',$url);

        header("Content-type:application/pdf");
        header("Content-Disposition:attachment;filename=".array_pop($arr));
        readfile($url);
    }

注意：调用pdf中的方法可能会存在跨域问题，跨域问题让后端解决即可，本地测试可能会存在问题，提交到测试环境下测试一下。

二、关于pdf链接显示跨域问题解决法案
说明：这个解决方案和上面的是独立的模块
对于使用iframe内嵌 viewer.html页面显示pdf跨域问题处理：
1，在viewer.html添加如下代码，代码位置最好放在加载viewer.js之前

 <script>
    
      var DEFAULT_URL = '/mobile.php/show/pdf?url='+getQueryStringByName('pdf');
      function getQueryStringByName(name){
        var result = location.search.match(new RegExp("[\?\&]" + name+ "=([^\&]+)","i"));
        if(result == null || result.length < 1){
          return "";
        }
        return result[1];
      }
    </script>

2，注释掉viewer.js中的DEFAULT_URL的默认属性

3，调用代码如下

 <iframe frameborder="0" id="myIframe" scrolling="no" :src="'../js/htmlshowPDF/web/viewer.html?pdf=http:'+newsInfo.content_pdf_name" width="100%" height="800px"></iframe>

注意：该方案是因为直接使用PDF的网址提示是跨域问题，所以就中间转换了一下，重新调用一个后端接口，将pdf链接地址传个后端，后端返回给一个pdf（假如将链接地址复制到浏览器网址，则直接下载成pdf的形式）
4，本案例中使用的后端接口是和上面的一样，php的接口，如下

  public function pdf($url){
        $url = urldecode($url);
        $arr = explode('/',$url);

        header("Content-type:application/pdf");
        header("Content-Disposition:attachment;filename=".array_pop($arr));
        readfile($url);
    }