被嵌入的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>
