前端生成pdf并导出，解决了图片不能绘制的问题.（一）

生成pdf的方式有多种，前端后端都可生成，各有优缺点，本文主要讲解前端生成pdf的方式，并解决了图片不能绘制的问题。前端生成，使用 html2canvas进行绘制。该方式操作简单，浏览器端即可完成，不会对服务器造成压力，但是生成的pdf质量较差，比较模糊。

使用方式：

1.页面引入 html2canvas.js 和 jspdf.debug.js 文件。下载地址：https://download.csdn.net/download/love1793912554/16796451，不要积分的

2.添加js方法：

   exportPDF: function () {
                // content是生成pdf的范围，容器的id
                let targetDom = $("#content");
                let copyDom = $("<div/>");
                copyDom.addClass('super');
                copyDom.width(targetDom.width() + "px");
                copyDom.height((targetDom.height() + 300) + "px");
                $('body').append(copyDom);
                let cont = document.getElementById('content');
                html2canvas(targetDom, {
                    background: '#fff',
                    useCORS: true,
                    height: cont.offsetHeight,//给canvas设置高度，
                    onrendered: function (canvas) {
                        //通过html2canvas将html渲染成canvas，然后获取图片数据
                        let imgData = canvas.toDataURL('image/jpeg', 1.0);
                        console.log(canvas.width, canvas.height);
                        //初始化pdf，设置相应格式
                        let doc = new jsPDF("p", "mm", "a4");

                        //这里设置的是a4纸张尺寸
                        doc.addImage(imgData, 'JPEG', 0, 0, 210, 297);

                        //输出保存命名为content的pdf
                        doc.save('report.pdf');
                        //移除dom中添加的元素
                        $('.super').remove();

                    }
                });
            },

3.需要注意，如果页面中有图片，本地图片在绘制的时候不会有影响，但是网络图片比如阿里云oss上的图片在pdf导出的时候会有问题，无法被绘制。

解决方式：

a.需要在img标签上加上 crossOrigin='Anonymous'，一定要加上。

b.使用云存储的需要开启跨域访问的限制。

 

基本就是这些，如果大家还有什么疑问可以在下方留言，一起成长，一起学习。