vue 页面内容生成图片\PFD方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 页面内容生成图片\PFD方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.下载插件

npm install html2canvas jspdf

2.引入

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

3.使用方法

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

<div class="input_box">
    <div id="content">
        <table class="input_table">
            <tr>
                <th colspan="6">表单标题</th>
            </tr>
            <tr>
                <td style="width:100px">客户姓名</td>
                <td colspan="2"><el-input v-model="setinputobj.customer_compute_name"></el-input>
                <td>销售方</td>
                <td colspan="2"><el-input v-model="setinputobj.staff_name"></el-input></td>
            </tr>
            <tr>
                <td>客户电话</td>
                <td colspan="2"><el-input v-model="setinputobj.mobile"></el-input></td>
                <td>电话</td>
                <td colspan="2"><el-input v-model="setinputobj.staff_moblie"></el-input></td>
            </tr>
            <tr>
                <td>客户单位</td>
                <td colspan="2"><el-input v-model="setinputobj.unit"></el-input></td>
                <td>单位</td>
                <td colspan="2"><el-input v-model="my_setinputobj.my_unit"></el-input></td>
            </tr>
            <tr>
                <td colspan="6"></td>
            </tr>
            <tr>
                <th>项目编号</th>
                <th>项目名称</th>
                <th>软件</th>
                <th>数量</th>
                <th>单价(元)</th>
                <th>报价(元)</th>
            </tr>
            <tr v-for="item, index in setinputobj.extend" :key="index">
                <td>{{ index + 1 }}</td>
                <td><el-input v-model="item.entry_name"></el-input></td>
                <td><el-input v-model="item.software"></el-input></td>
                <td><el-input v-model="item.num"></el-input></td>
                <td><el-input v-model="item.price"></el-input></td>
                <td><el-input v-model="item.quoted_price"></el-input></td>
            </tr>
            <tr>
                <td colspan="6"></td>
            </tr>
            <tr>
                <td colspan="2">价格(元)</td>
                <td colspan="4"><el-input v-model="setinputobj.tea_money"></el-input></td>
            </tr>
            <tr>
                <td colspan="2">周期(工作日天数)</td>
                <td colspan="4"><el-input v-model="setinputobj.cycle"></el-input></td>
            </tr>
            <tr rowspan="4">
                <td colspan="2">备注</td>
                <td colspan="4">
                    <p style="margin-left:1em;">1.以上报价有效期为7天；</p>
                    <p style="margin-left:1em;">2.付款方式：按照合同签订付款方式执行；</p>
                    <p style="margin-left:1em;">3.付款过程中产生的手续费双方各自承担；</p>
                </td>
            </tr>
        </table>
    </div>
    <div class="btn">
        <el-button type="success" @click="set_png">生成报价单</el-button>
    </div>
</div>

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;
    }
}

效果 $vue 页面内容生成图片\PFD方法,vue2,前端,javascript,开发语言$