上传Excel与生成PDF

qq_70563976
已于 2023-01-29 16:09:19 修改
阅读量164
点赞数
文章标签： javascript 前端 Powered by 金山文档
于 2023-01-29 16:06:09 首次发布
本文链接：https://blog.csdn.net/qq_44109588/article/details/128790481
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>

    <title>XXXXX明细表</title>
</head>

<body>
    <main id="app">
        <input type="file" accept=".xls,.xlsx" name="files" @change="readExcel($event)" />
        <button @click="onPrint()">打印</button>
        <button @click="homePage">首页</button>
        <button @click="reducePage">上一页</button>
        <button @click="increasePage">下一页</button>
        <div class="table_l">
            <header>XXXXX明细表</header>
            <table>
                <tr>
                    <td v-for="ele in tableTitle" :key="ele.value">{{ele.label}}</td>
                </tr>                        // tableList
                <tr v-for="(item, index) in 31" :key="index">
                    <!-- <td>{{item[tableTitle[index].value]}}</td> -->
                    <td>5555555555555570337</td>
                    <td>2018-09-06</td>
                    <td>03:43:06</td>
                    <td>44735</td>
                    <td>贷</td>
                    <td>0.34</td>
                    <td>64.84</td>
                    <td>人民币</td>
                    <td>400000272</td>
                    <td>022</td>
                    <td>4000027219200208691</td>
                    <td>财付通支付宝科技有限公司客服备付金</td>
                    <td>中国工商银行股份有限公司深圳高新园南区支行</td>
                    <td>0029</td>
                    <td>委托收银</td>
                    <td></td>
                    <td>13566668888结算自动人</td>
                </tr>
               
            </table>
            <footer>
                <div>查询编号：<b>202215555555555555</b></div>
                <div>第<b>1</b>页,共<b>{{TPage}}</b>页</div>
                <div>中国XXXX股份有限公司</div>
            </footer>
        </div>
        <div>
            <button @click="homePage">首页</button>
            <button @click="reducePage">上一页</button>
            <button @click="increasePage">下一页</button>
        </div>
    </main>
</body>
<script type="text/javascript">
    //页面初始化
    function init() {
        var doc = new jsPDF();
        doc.text(20, 20, 'Welcome to hangge.com');
        doc.save('Test.pdf');
    }
    new Vue({
        el: '#app',
        data() {
            return {
                page: {
                    page: 1,
                    size: 31,
                    total: 101,
                },
                name: 'content',
                tableTitle: [
                    {
                        label: '账号',
                        value: ''
                    }, {
                        label: '入账日期',
                        value: ''
                    }, {
                        label: '入账时间',
                        value: ''
                    }, {
                        label: '交易代码',
                        value: ''
                    }, {
                        label: '借贷标志',
                        value: ''
                    }, {
                        label: '发生额',
                        value: ''
                    }, {
                        label: '余额',
                        value: ''
                    }, {
                        label: '币种',
                        value: ''
                    }, {
                        label: '交易物理机构',
                        value: ''
                    }, {
                        label: '渠道',
                        value: ''
                    }, {
                        label: '对方账号',
                        value: ''
                    }, {
                        label: '对方用户名',
                        value: ''
                    }, {
                        label: '对方行名',
                        value: ''
                    }, {
                        label: '柜员号',
                        value: ''
                    }, {
                        label: '附言',
                        value: ''
                    }, {
                        label: '用途',
                        value: ''
                    }, {
                        label: '摘要',
                        value: ''
                    }
                ],
                tableList: ['']
            }
        },
        computed: {
            TPage() {
                return Math.ceil(this.page.total / this.page.size)
            }
        },
        methods: {
            // 上传文件
            readExcel( e) { //表格导入
                let that = this,
                    files = e.target.files;
                if (!files.length) { //如果没有文件
                    return false;
                } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
                    alert('上传格式不正确，请上传xls或者xlsx格式');
                    return false;
                }

                let formData = new FormData();
                formData.append("file", files[0]);

                axios({
                    method: 'post',
                    url: 'http://localhost:8000/importTable',
                    headers: { "Content-Type": "multipart/form-data" },
                    data: formData
                }).then((res) => {
                    console.log(res)
                }).catch((err) => {
                    log.error(err)
                })
            },
            homePage() {
                this.page.page = 1
            },
            reducePage() {
                this.page.page--
            },
            increasePage() {
                this.page.page++
            },
            print() {
                window.print()
            },

            // 打印
            onPrint() {
                const target = document.querySelector(".table_l");
                target.style.background = "#FFFFFF";

                html2canvas(target, {
                    dpi: 144,
                    onrendered: function (canvas) {
                        const contentWidth = canvas.width;
                        const contentHeight = canvas.height;
                        //一页pdf显示html页面生成的canvas高度;
                        const pageHeight = contentWidth / 841.89 * 592.28;

                        //未生成pdf的html页面高度
                        let leftHeight = contentHeight;
                        //页面偏移
                        let position = 0;
                        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                        const imgWidth = 841.89;

                        const imgHeight = (contentHeight / 1191) * 592.28;
                        // var imgHeight = 592.28/contentWidth * contentHeight;

                        const pageData = canvas.toDataURL('image/jpeg', 1.0);

                        const pdf = new jsPDF('l', 'pt', 'a4');

                        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                        //当内容未超过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 -= 841.89;
                                //避免添加空白页
                                if (leftHeight > 0) {
                                    pdf.addPage();
                                }
                            }
                        }
                        pdf.save(name + ".pdf");
                    }
                })
            }
        },
    })
</script>
<style>
    #app {
        width: 1796.8px;
        font-size: 12px;
        padding: 20px;
    }

    .table_l {
        overflow: hidden;
        box-sizing: border-box;
        width: 1796.8px;
        font-size: 12px;
        padding: 20px;
    }

    header {
        text-align: center;
        margin-bottom: 5px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    td {
        text-align: center;
        vertical-align: center;
        border: 1px solid #000;
    }

    table td:nth-child(1) {
        width: 137px;
    }

    table td:nth-child(2) {
        width: 70px;
    }

    table td:nth-child(3) {
        width: 70px;
    }

    table td:nth-child(4) {
        width: 60px;
    }

    table td:nth-child(5) {
        width: 60px;
    }

    table td:nth-child(6) {
        width: 70px;
    }

    table td:nth-child(7) {
        width: 120px;
    }

    table td:nth-child(8) {
        width: 60px;
    }

    table td:nth-child(9) {
        width: 120px;
    }

    table td:nth-child(10) {
        width: 60px;
    }

    table td:nth-child(11) {
        width: 137px;
    }

    table td:nth-child(12) {
        width: 150px;
    }

    table td:nth-child(13) {
        width: 137px;
    }

    table td:nth-child(14) {
        width: 70px;
    }

    table td:nth-child(15) {
        width: 120px;
    }

    table td:nth-child(16) {
        width: 120px;
    }

    table td:nth-child(17) {
        width: 150px;
    }

    footer {
        font-size: 15px;
        margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
</style>

</html>