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

一时失言乱红尘 2022-10-13 14:00 833阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]  
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);
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20221005/013ccd0bdf924c848dae391f7c67f81d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/f99ca19773f746f5aed47abfb38ad50a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，833人围观）

还没有评论，来说两句吧...

相关阅读

相关 html前端跨域问题的解决方案

前言：在前端发出Ajax请求的时候，有时候会产生跨域问题，报错如下: Access to XMLHttpRequest at ‘http://127.0.0.1/api

r囧r小猫/ 2024年04月01日 18:53/ 0 赞/ 41 阅读

相关 html2canvas和jspdf导出pdf，每个页面模块占一页，在pdf中垂直居中显示

需求：html页面转换pdf，页面有多个模块，页面中有文本、echarts、表格等模块，一个模块占一页，因为模块高度不够，所以需要垂直居中通过html2canvas和js

旧城等待，/ 2024年03月25日 08:29/ 0 赞/ 35 阅读

相关 html 显示 pdf

[http://www.cnblogs.com/ZbsCc/p/11543302.html][http_www.cnblogs.com_ZbsCc_p_11543302.htm

系统管理员/ 2023年02月13日 11:04/ 0 赞/ 55 阅读

相关 html2canvas显示错位，空白，跨域的问题解决，以及一些坑

首先目前几个rc版本可能表现是不一致的。比如rc5就很容易有问题。我目前使用rc1.感觉这个问题少一些。值得注意的是，如果使用Npm安装的话，要么锁版本，要么指定明确的版本。即

你的名字/ 2022年12月19日 06:07/ 0 赞/ 294 阅读

相关 html页面生成pdf

方法 > 主要用到html2canvas.js 和 pdf.debug.js 原理 > html2canvas.js ：通过canvas将HTML生成的DOM节点

男娘i/ 2022年12月15日 02:20/ 0 赞/ 213 阅读

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

一，html页面显示pdf渲染成canvas案例如下图所示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

一时失言乱红尘/ 2022年10月13日 14:00/ 0 赞/ 834 阅读

相关 html页面读取pdf案例

html页面读取pdf案列，如下图所示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

约定不等于承诺〃/ 2022年10月12日 01:23/ 0 赞/ 269 阅读

相关 html2pdf—html页面下载pdf案列，及图片不能显示问题

一，html2pdf—html页面下载pdf文件需求：html2pdf—html页面下载pdf文件使用的插件js是html2pdf.js，[html2pdf官方链接

绝地灬酷狼/ 2022年10月10日 12:38/ 0 赞/ 955 阅读

相关飞翔pdf生成html,pdf转换成html转换器

pdf转换成HTML转换器是一款pdf转换工具，可以把pdf格式文件转换为html文件，直接在浏览器中浏览。pdf转换成HTML转换器支持批量转换，并且界面简单，功能稳定使

电玩女神/ 2022年10月06日 11:58/ 0 赞/ 187 阅读

相关 html页面保存成图片，图片写入pdf

需求是一个导出pdf的功能，多方奔走终于实现了，走了不少弯路，而且怀疑现在这个方法仍是弯的。有个jsPDF 插件可以在前端直接生成pdf，很简便，但不支持IE。前端：

r囧r小猫/ 2022年07月17日 01:18/ 0 赞/ 205 阅读