Html转PDF（使用html2canvas ）跨域图片PDF文件上无法显示问题记录

最新推荐文章于 2024-07-31 11:17:59 发布

7ethe

最新推荐文章于 2024-07-31 11:17:59 发布

阅读量1.5k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lethe0624/article/details/109852621

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Html转PDF（使用html2canvas ）跨域图片PDF文件上无法显示问题记录

代码实现

引用Js文件

<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>

js 实现部分代码

<script type="text/javascript">
    var dId = getQueryVariable("dId");
    //声明img
    var img = new Image()
    img.crossOrigin = "Anonymous";//解决跨域图片问题
    img.src = "图片服务器地址/fileName.jpg";
    //加载图片成功
    img.onload = function () {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");

        var width = img.width;
        var height = img.height;

        canvas.width = width;
        canvas.height = height;
        //绘制到canvas上
        ctx.drawImage(img, 0, 0, width, height);
        document.getElementById("imagebox").appendChild(canvas);
    }
    
    function jsPdfDownload(){
        let dName = decodeURI(getQueryVariable("dName"));
        let pdfName = dName +"居民满意度调查通知";
        let id ="pdf-wrapper";
        var target = document.getElementById(id);
        target.style.background = "#FFFFFF";
        if(pdfName==''||pdfName==undefined) pdfName= getNowFormatDate();

        html2canvas(target, {
            useCORS: true, // 【重要】开启跨域配置
            allowTaint: true,//允许跨域图片
            taintTest: false,//是否在渲染前测试图片
            // height: target.offsetHeight, // 下面解决当页面滚动之后生成图片出现白边问题
            // width: target.offsetWidth,
            // windowWidth: document.body.scrollWidth,
            // windowHeight: document.body.scrollHeight,
            x: 0,
            y: 0,
            dpi: window.devicePixelRatio * 2, // 解决图片不清晰问题
            //scale: 2,
            onrendered:function(canvas) {
                var contentWidth = canvas.width;
                var contentHeight = canvas.height;

                //一页pdf显示html页面生成的canvas高度;
                var pageHeight = contentWidth / 592.28 * 841.89;
                //未生成pdf的html页面高度
                var leftHeight = contentHeight;
                //页面偏移
                var position = 0;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                // var imgWidth = 515.28;//595.28//左右边距40
                // var imgHeight = 512.28/contentWidth * contentHeight;//左右边距40
                var imgWidth = 595.28;
                var imgHeight = 595.28/contentWidth * contentHeight;

                var pageData = canvas.toDataURL('image/jpeg', 1.0);

                var pdf = new jsPDF('', 'pt', 'a4');

                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );//左右边距0
                } else {
                    while(leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)//左右边距0
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if(leftHeight > 0) {
                            pdf.addPage();
                        }
                    }
                }
                pdf.save(pdfName+".pdf");
            }
        })
    }
</script >

Html页面主要代码

<body>
<div style="text-align:center ">
    <button class="btn" onclick="jsPdfDownload()">下载pdf</button>
</div>
<div class="textcontent" id="pdf-wrapper" >
    <div class="toptitle" id="dName">小区名称</div>
    <div class="toptitle">关于居民满意度调查使用方法</div>

    <div class="content">

    <div class="lefttoptitle">居民朋友:</div>
    <p class="middlecontent"> 您好，为了解小区服务站向广大居民提供的服务情况,请各位居民扫描下方二维码，<br>对小区的服务进行评分（每人仅限评分一次），谢谢配合。</p>
    
    <!--小区二维码-->
    <div class="imagebox" id="imagebox">

    </div>
    
    <div class="lefttoptitle">具体流程如下:</div>
    <div class="leftbottomtitle">1、扫描二维码</div>
    <div class="righttext"> 通过微信扫描上方“居民满意度调查问卷二维码”。</div>
    <div class="leftbottomtitle">2、关注公众号</div>
    <div class="righttext"> 扫码后关注“XXXXXXX”公众号。</div>
    <div class="leftbottomtitle">3、开始答题</div>
    <div class="righttext"> 关注后，进入答题页面，开始答题。</div>
    <div class="leftbottomtitle">4、提交问卷</div>
    <div class="righttext"> 根据问卷内容进行填写，填写完毕后提交结果，完成答题。</div>

    </div>

    <ul>
        <li>XXXXX宣</li>
        <li id ="currentDate">2020年11月1日</li>
    </ul>
    <div class="box"></div>
</div>
</body>