适配针式打印机EPSON爱普生,在vue项目中用原生js搭配iframe完成唤起打印弹窗

简介: 适配针式打印机EPSON爱普生,在vue项目中用原生js搭配iframe完成唤起打印弹窗


被嵌入的frame html页面,命名为index.html,放入static/previewPDF/路径下

<!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">
    <title>打印预览</title>
    <style>
        html,
        body,
        div,
        span,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        img,
        b,
        i,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        form,
        label,
        table,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        input,
        select,
        button,
        a {
            list-style: none;
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            border-collapse: collapse;
            border-spacing: 0;
        }
        /* A4纸像素长宽分别是842×595 */
        .table {
            width: 842px;
            min-height: 595px;
        }
        .table * {
            font-weight: 100;
            font-family: 'Microsoft YaHei';
        }
        .head {
            width: 100%;
            text-align: center;
            margin-bottom: 5px;
        }
        .title {
            font-weight: 200;
            font-size: 24px;
        }
        .datetime {
            font-size: 14px;
            margin-bottom: 20px;
        }
        .head-desc {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        table {
            width: 100%;
            border: 1px solid #eee;
            border-collapse: collapse;
        }
        table tr {}
        table th {
            font-weight: 200;
            border: 1px solid black;
            text-align: center;
            font-size: 14px;
        }
        table td {
            border: 1px solid black;
            text-align: center;
            font-size: 14px;
        }
        .foot-desc {
            margin-top: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="head">
            <div class="title"><span id="GSMC">XXXX有限公司</span>-<span id="LX">XX单</span></div>
            <div class="datetime">时间:<span id="CJSJ">2020年0月0日 18:08:08</span></div>
            <div class="head-desc">
                <div>客户:<span id="KHMC">XXXX有限公司</span></div>
                <div>单号:<span id="DH">23061214500008888</span></div>
            </div>
        </div>
        <table>
            <colgroup>
                <col style="width: 50px;">
                <col style="width: 100px;">
                <col style="width: 300px;">
                <col style="width: 150px;">
                <col style="width: 50px;">
                <col style="width: 100px;">
                <col style="width: 100px;">
            </colgroup>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>品牌</th>
                    <th>型号规格</th>
                    <th>商品名称</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>金额</th>
                </tr>
            </thead>
            <tbody id="HPS">
                <tr>
                    <td>1</td>
                    <td>BMW</td>
                    <td>宝马3系(进口) 2009款 335i</td>
                    <td>三厢车</td>
                    <td>1</td>
                    <td>360000</td>
                    <td>360000</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>BMW</td>
                    <td>宝马3系(进口) 2008款 320i典雅型 2.0L</td>
                    <td>三厢车</td>
                    <td>1</td>
                    <td>580000</td>
                    <td>580000</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>玛莎拉蒂</td>
                    <td>Maserati GranTurismo</td>
                    <td>双门四座跑车</td>
                    <td>1</td>
                    <td>2880000</td>
                    <td>2880000</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>阿斯顿马丁</td>
                    <td>AstonMartin </td>
                    <td>两门两座超跑</td>
                    <td>1</td>
                    <td>3880000</td>
                    <td>3880000</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>6</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>7</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>8</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>9</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>10</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <div class="foot-desc">
            <div>开单人:<span id="CJRMC">你挚爱的强哥</span></div>
            <div>联系电话:<span id="LXDH">16666666666(微信同号) 028-66666666</span></div>
        </div>
        <div class="address">
            <div>公司地址:<span id="GSDZ">XX市XXX...</span></div>
        </div>
        <div class="remark">
            <div>备注:<span id="BZ">...</span></div>
        </div>
    </div>
</body>
<script>
    function initPDF({ d, } = { d: null, }) {
        if (d) {
            Object.keys(d).forEach((k) => {
                // 执行逻辑
            });
        }
    }
</script>
</html>

vue代码

<template>
    <iframe ref="previewPDF" src="static/previewPDF/index.html" hidden></iframe>
</template>
<script>
    export default {
        created() {
            this.jsPrint();
        },
        methods: {
            jsPrint({ d, } = { d: null, }) {
                this.$refs.previewPDF.contentWindow.initPDF({ d: { a: 1, b: 2 } });//调用frame中的方法
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.$refs.previewPDF.contentWindow.print();//唤起打印弹窗
                    }, 100);
                });
            },
        }
    }
</script>

image.png


相关文章
|
2月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
73 3
|
27天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
31 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
34 4
|
3月前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
2月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
167 0
|
2月前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
48 0
|
2月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
|
3月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
40 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
3月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
60 3
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
100 2