后台卷子html页面导出为pdf

这几天老板让我和客户对接一个考试系统的二开功能，在考卷模块，客户让加一个导出为pdf的功能。研究了大半天，在网上游了半天，有点眉目，这里记录一下，大家可以一块学习

总共分为三步：

1. 下载html2canvas.js；
2. 下载jspdf.js；
3. 输入代码，网上很多；

下载html2canvas.js

这里用到的node.js的npm下载库，类似于php的composer，不会使用的可以: 点击这里
从这个链接可以学会安装node.js
你仔细看文章就会发现，npm在你装node.js的时候，就已经连带一块装了，这点比php简单多了，点个赞。
完了就去html2canvas官网
简单学习如何使用html2canvas。这里说明下，这个学习过程很关键。
我做完还做了一个小demo，很简单。就不做展示，相信有一定代码基础的人都会。

下载jspdf.js

这步的时候我偷了个懒直接用的线上链接

<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>

不得不说，线上链接是真的爽，一行代码就好了。
小伙伴们要依据项目环境区分使用线上链接还是线下。
附上jspdf的下载链接

输入代码，网上很多

<script type="text/javascript">
    (function(){
        if($("#see").val() == 1){
            return false;  //这样就不会报错了
        }
    })()
    var opts = {
        background: "#fff",   //这里给生成的图片默认背景，不然的话，如果你的html根节点没设置背景的话，会用黑色填充。
        // allowTaint: true,          //避免一些不识别的图片干扰，默认为false，遇到不识别的图片干扰则会停止处理html2canvas
        /*canvas: canvas,                       // 将自定义canvas作为配置项
        useCORS: true,                        // 允许图片跨域
        height: 300  // 修复截图不完整问题*/
    }
    html2canvas(document.querySelector("#to-pdf"), opts).then((canvas) => {
        var imgData = canvas.toDataURL('image/jpeg');
        var img = new Image();
        img.src = imgData;
        //根据图片的尺寸设置pdf的规格，要在图片加载成功时执行，之所以要*0.225是因为比例问题
        img.onload = function() {
            //此处需要注意，pdf横置和竖置两个属性，需要根据宽高的比例来调整，不然会出现显示不完全的问题
            if (this.width > this.height) {
                var doc = new jsPDF('l', 'mm', [this.width * 0.225, this.height * 0.225]);
            } else {
                var doc = new jsPDF('p', 'mm', [this.width * 0.225, this.height * 0.225]);
            }
            doc.addImage(imgData, 'jpeg', 0, 0, this.width * 0.225, this.height * 0.225);
            //根据下载保存成不同的文件名
            doc.save('report_pdf_' + new Date().getTime() + '.pdf');
        }
    });
</script>

参考文章: link
代码上都有备注，请自行解读
这是我导出来的，很长，就只截取了一部分:
再小的帆也能远航 致敬狂神