vue生成图片或pdf

生成图片的时候预览总是不会铺满整个页面，花了点时间直接整成pdf格式，贴出关键点代码部分如下:

<template>
<div>
    <div id="pia">
    </div>

    <div style="text-align:center">
        <el-button type="primary" @click="htmltopdf">导出报告</el-button>
    </div>
</div>
</template>

<script>
import html2Canvas from "html2canvas";
import jsPDF from "jspdf";

export default {
    data() {
        return {
            logo: require('@/assets/logo2.png'),

        }
    },
    methods: {
        getPixelRatio(context){
            var backingStore = context.backingStorePixelRatio ||
                    context.webkitBackingStorePixelRatio ||
                    context.mozBackingStorePixelRatio ||
                    context.msBackingStorePixelRatio ||
                    context.oBackingStorePixelRatio ||
                    context.backingStorePixelRatio || 1;
            return (window.devicePixelRatio || 1) / backingStore;
        },
        download(base64) {
            var that = this;
            const link = document.createElement('a');
            link.href = base64;
            link.download = `${that.task_body.task_id}隐私检测报告.png`;
            link.click();
        },
        htmltopdf() {
            var that = this;
            var content_html = document.getElementById("pia");
            // let width = content_html.offsetWidth;
            // let height = content_html.offsetHeight;
            // let offsetTop = content_html.offsetTop;
            // let canvas = document.createElement("canvas");
            // let context = canvas.getContext('2d');
            // let scaleBy = that.getPixelRatio(context);
            // canvas.width = width*scaleBy;
            // canvas.height = (height+offsetTop)*scaleBy;
            // context.scale(scaleBy,scaleBy);
            // var opts = {
            // 　　allowTaint:true,//允许加载跨域的图片
            // 　　tainttest:true, //检测每张图片都已经加载完成
            //     scale:scaleBy, // 添加的scale 参数
            //     canvas:canvas, //自定义 canvas
            //     logging: true, //日志开关，发布的时候记得改成false
            //     width:width, //dom 原始宽度
            //     height:height //dom 原始高度
            // };

            var scale = 2
            var opts = {
                scrollY: 0,
                scrollX: 0,
                scale: scale,
                useCORS: true
            }
            html2Canvas(content_html, opts)
            .then((canvas) => {
                const contentWidth = canvas.width / scale;
                const contentHeight = canvas.height / scale;
                let imageUrl = canvas.toDataURL('image/jpeg', 1.0); // 将canvas转成base64图片格式
                const PDF = new jsPDF('', 'pt', [contentWidth, contentHeight]);
                // that.download(imageUrl)
                PDF.addImage(imageUrl, 'JPEG', 0, 0, contentWidth, contentHeight);
                PDF.save(`${that.task_body.task_id}隐私检测报告.pdf`);
            });

            // var dom = document.getElementById("pia");
            // html2Canvas(dom, {
            //         scrollY: 0,
            //         scrollX: 0,
            //         useCORS: true, // 开启跨域
            //         // width: 1000, // 这个宽度，太扯淡了，固定1000，防止偏移！
            //         height: dom.offsetHeight,
            //         allowTaint: true
            //     }).then(function (canvas) {
            //         // 获取canvas画布的宽高
            //         let contentWidth = canvas.width;
            //         let contentHeight = canvas.height;
            //         // 一页pdf显示html页面生成的canvas高度;
            //         let pageHeight = contentWidth / 842 * 592;
            //         // 未生成pdf的html页面高度
            //         let leftHeight = contentHeight;
            //         // 页面偏移
            //         let position = 0;
            //         // html页面生成的canvas在pdf中图片的宽高
            //         let imgWidth = 595;
            //         let imgHeight = 595 / contentWidth * contentHeight;
            //         let pageData = canvas.toDataURL('image/jpeg', 1.0);
            //         let PDF = new jsPDF('', 'pt', 'a4');
            //         // 两个高度需要区分: 一个是html页面的实际高度，和生成pdf的页面高度
            //         // 当内容未超过pdf一页显示的范围，无需分页
            //         if (leftHeight < pageHeight) {
            //             PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
            //         } else {
            //             while (leftHeight > 0) {
            //                 PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            //                 leftHeight -= pageHeight;
            //                 position -= 842
            //                 // 避免添加空白页
            //                 if (leftHeight > 0) {
            //                     PDF.addPage();
            //                 }
            //             }
            //         }
            //         window.open(PDF.output('bloburl'));  //在新页面打开当前pdf
            //         PDF.save(that.task_body.task_id + '.pdf')
            //     })
        }
    },
    filters: {
        showTrue(val){
            if(val === 1){
                return "是";
            }else {
                return "否";
            }
        },
        showDesc(val){
            switch(val){
                case "1":
                    return "L3低风险";
                    break;
                case "2":
                    return "L2中风险";
                case "3":
                    return "L1高风险";
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .pdf_header {
        background-color: #052e28;
        line-height: 120px;
        height: 120px;
        color: white;
        text-align: center;
        font-size: 40px;
        font-weight: 700;

        img {
            line-height: 120px;
            float: right;
            margin-right: 20px;
        }
    }
    .pdf_body {
        margin-top: 20px;
        margin-bottom: 50px;
        margin-left: 50px;
        margin-right: 50px;
        font-size: 14px;
        font-weight: 700;
    }
    .pdf_gap {
        margin-top: 20px;
    }

    .title {
        color:rgb(226, 154, 59);
        font-size:20px;
        font-weight: 700;
    }
</style>

总算看着顺眼点，效果如下: