vue 页面内容生成图片\PFD方法

1.下载插件

npm install html2canvas jspdf

2.引入

import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';

3.使用方法

在需要生成的内容绑定类名或id,在下面获取元素

    

        

            

                
表单标题
            
            

                
客户姓名
                

                
销售方
                

            
            

                
客户电话
                

                
电话
                

            
            

                
客户单位
                

                
单位
                

            
            

                

            
            

                
项目编号
                
项目名称
                
软件
                
数量
                
单价(元)
                
报价(元)
            
            

                
{{ index + 1 }}
                

                

                

                

                

            
            

                

            
            

                
价格(元)
                

            
            

                
周期(工作日天数)
                

            
            

                
备注
                

                    
1.以上报价有效期为7天；
                    
2.付款方式：按照合同签订付款方式执行；
                    
3.付款过程中产生的手续费双方各自承担；
                
            
        
    
    

        生成报价单
    

js 

set_png() {
    // 获取需要截图的元素
    const element = await document.querySelector('#content');
    // 使用 html2canvas 将元素转换为图片
    html2canvas(element).then(function (canvas) {
        // 将图片转换为 DataURL
        const dataUrl = canvas.toDataURL('image/png');
        // 创建一个 a 标签，用于下载图片
        const link = document.createElement('a');
        link.href = dataUrl;
        link.target = "_blank";
        link.download = '报价单.png';
        link.click();
    });
    // 生成pdf方法
    // pdf宽度800px 图片没有限制
    // const canvas = await html2canvas(element); // 将元素转换为canvas
    // const imgData = canvas.toDataURL('image/png'); // 将canvas转换为图片数据
    // const pdf = new JsPDF(); // 创建一个新的PDF文档
    // pdf.addImage(imgData, 'PNG', 5, 10); // 将图片添加到PDF文档中
    // pdf.save('报价单.pdf'); // 保存PDF文档
},

less样式 

.input_box {
    color: #606266;
    position: relative;
    padding-bottom: 80px;
    box-sizing: border-box;

    #content {
        padding: 20px;
        margin-top: 10px;
    }

    // 表格
    .input_table {
        text-align: center;
        border-collapse: collapse;
        width: 100%;

        /deep/ .el-input__wrapper {
            box-shadow: none;
        }

        tr {
            height: 40px;
        }

        th {
            border: 1px solid #000;
        }

        td {
            border: 1px solid #000;
        }

        .last {
            width: 80px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #fff;
        }
    }

    p {
        text-align: left;
    }

    .btn {
        float: right;
        margin-right: 20px;
        margin-top: 20px;
    }
}

 效果

 点击生成图片或pdf

图片没有宽高大小限制

pdf宽度大概800px,长度也有限制，不建议使用pdf