前端实现打印页面的指定内容 + 快递面单的模板

原理是利用iframe，原生js写法完整demo。如果需要打印的内容比较多，建议做一个模板。本人在项目中是用vue做的，需要打印的部分在另外一个页面，这样看起来会没有那么乱。记得将打印部分隐藏起来，另外分享一个快递面单的模板。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>打印</title>
</head><body><h1 style="display: none;" id="print-iframe">test，test</h1><button onclick="print()">打印</button><script>function print() {var iframe = document.createElement('iframe');document.body.appendChild(iframe)doc = iframe.contentWindow.document;let wrap = document.getElementById("print-iframe").innerHTML;doc.write("<div>" + wrap + "</div>");doc.close();iframe.contentWindow.focus();iframe.contentWindow.print();}</script>
</body></html>

打印的快递面单模板（vue）

<template><div id="print-iframe"><divstyle="height: 80px;border: 1px dotted #000;font-size: 12px !important;overflow: hidden;box-sizing:border-box;"><divstyle="width: 45%;height: 100%;float: left;border-right: 1px dotted #000;text-align: center;font-weight:bold;box-sizing:border-box;"><div style="font-size: 15px;margin-top:15px;">EMS快递</div><div style="font-size: 22px;margin-top:5px;">标准快递</div></div><div style="float: left;width: 55%;height: 100%;text-align: center;"><img style="padding-top: 5px; height: 90%;" :src="message.img" alt /></div></div><divstyle="height: 60px;border: 1px dotted #000;font-size: 12px !important;overflow: hidden;border-top:none;box-sizing:border-box;"><divstyle="width: 50%;height: 100%;float: left;border-right: 1px dotted #000;padding:5px 0 0 5px;box-sizing:border-box;"><div>寄件：<span>寄件始发地</span></div><div style="padding-left:37px;box-sizing:border-box;">需要打印的电话</div><div style="padding-left:37px;box-sizing:border-box;">需要打印的地址</div></div><spanstyle="font-weight:bold;font-size:28px;text-align:center;display:block;padding-top: 10px;box-sizing: border-box;">公安证照</span></div><divstyle="height: 60px;border: 1px dotted #000;border-top:none;font-size: 12px !important;padding:5px 0 0 5px;box-sizing:border-box;"><div>收件：<span>{{ message.tcontactor }}</span></div><div style="padding-left:37px;">{{ message.tcustMobile }}</div><div style="padding-left:37px;">{{ message.tcustAddr }}</div></div><divstyle="height: 60px;border: 1px dotted #000;border-top:none;font-size: 12px !important;overflow: hidden;box-sizing:border-box;"><divstyle="width: 45%;height: 100%;float: left;border-right: 1px dotted #000;padding-right: 0;margin-left: -2px;padding:5px 0 0 5px;box-sizing:border-box;"><div style="line-height:0.8; margin-bottom: 2px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.8);">计费重量：0.1KG</div><div style="line-height:0.8; margin-bottom: 0px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.8);">保价金额：0</div><div>投递应收寄递费：￥0</div></div><div style="width: 55%;float: left;height: 100%;padding:5px 0 0 5px;box-sizing:border-box;"><div style="line-height:0.8; margin-bottom: 0px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.8);">收件人/代收人：</div><divstyle="line-height:0.8; margin-bottom: 0px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.8);white-space: nowrap;">签收时间：&emsp;&emsp;年&emsp;&emsp;月&emsp;&emsp;日&emsp;&emsp;时</div><div style="margin-top:-2px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.76);">快件送达收货人地址，经收件人或收件人允许的代收人签字视为送达</div></div></div><divstyle="height: 86px;border: 1px dotted #000;border-top:none;font-size: 12px !important;padding:10px 0 0 5px;box-sizing:border-box;"><div style="margin-bottom:20px;"><span style="margin-right:10px;">件数：1</span><span>重量(KG):1KG</span></div><div>配货信息：<span style="margin-left:10px;">公安证照</span></div></div><divstyle="height: 60px;border: 1px dotted #000;border-top:none;font-size: 12px !important;overflow: hidden;box-sizing:border-box;"><divstyle="width: 45%;height: 100%;float: left;border-right: 1px dotted #000;text-align: center;padding-right: 0;margin-left: -2px;box-sizing:border-box;"><img style="padding-top: 5px; height: 90%;" :src="message.img" alt /></div><div style="width: 55%;float: left;height: 60px;line-height:60px;text-align:center;"><span style="font-weight:bold;font-size:28px;">公安证照</span></div></div><divstyle="height: 80px;padding-right: 0;border: 1px dotted #000;border-top:none;font-size: 12px !important;overflow: hidden;box-sizing:border-box;"><divstyle="margin-left: -2px;width: 45%;height: 100%;float: left;border-right: 1px dotted #000;margin-left: -2px;padding:5px 0 0 5px;box-sizing:border-box;"><div>寄件：<span>寄件始发地</span></div><div style="padding-left:37px;">需要打印的电话</div><div style="padding-left:37px;">需要打印的地址</div></div><div style="width: 55%;float: left;height: 100%;padding:5px 0 0 5px;box-sizing:border-box;"><div style="margin-bottom: 2px;">收件：<span>{{ message.tcontactor }}</span></div><div style="padding-left: 37px;margin-bottom: 2px;"><span>{{ message.tcustMobile }}</span></div><div style="padding-left:37px;">{{ message.tcustAddr }}</div></div></div><divstyle="height: 80px;padding-right: 0;border: 1px dotted #000;border-top:none;font-size: 12px !important;overflow: hidden;box-sizing:border-box;"><divstyle="width: 70%; margin-left:-2px;height: 100%;float: left;border-right: 1px dotted #000;padding-right: 0;margin-left: -2px;padding:5px 0 0 5px;box-sizing:border-box;"><div style="height: 50px;">备注：<span>公安证照</span></div><div style="padding-top: 5px; border-top: 1px dotted #000;box-sizing:border-box;">网址：www.ems.com.cn&emsp;&emsp;客服电话：11183</div></div><div style="width: 30%;display:flex;justify-content:center;align-items:center;height: 100%;"><span style="font-weight:bold;font-size:28px;">公安证照</span></div></div></div>
</template><script>export default {name: "PrintOrder",props: ["message"],data() {return {};},watch: {message: {deep: true,handler(val) {console.log("val");}}}};
</script><style lang="scss" scoped>
</style>

效果图：

前端实现打印页面的指定内容 + 快递面单的模板相关推荐

点击a标签，跳转到同一页面的指定内容，类似于点击按钮回到页面顶部效果
点击a标签,跳转到同一页面的指定内容,类似于点击按钮回到页面顶部效果这个效果实现方式很简单,只需要在a标签href内填上id名,在内容标签内加入id="名"便可. 下面是实现效果 ...
window.print()打印网页中指定内容的实现方法
一般直接使用window.print();是直接打印了整个页面,但只打印其中的一部分时就需要一些方法了 1.在页面的代码头部处加入JavaScript: <script language=jav ...
php 实现类,php 获取页面中指定内容的实现类
本文为大家下使用php如何获取页面中的指定内容,而且以封装成类,需要的朋友可以参考下本文功能: 1.获取内容中的url,email,image. 2.替换内容中的url,email,image. u ...
js html保存word文档,js将页面中指定内容保存到WORD
在网页WEB中,我们可以借助JS代码,将页面中指定的内容或特定的局部内容,而不是整个页面,导出到WORD文档,进而可以通过WORD保存的方法,生成WORD文件. 通过这种方法,在导出的时候,如果是第一 ...
php获取页面中的指定内容,php 获取页面中指定内容的实现类
[email protected] image: Grep.class.php /** grep class * Date: 2013-06-15 * Author: fdipzone * Ver: ...
window.print()打印网页中指定内容
<!DOCTYPE html> <html><head><meta charset=" utf-8"><meta name=& ...
window.print 打印页面指定区域
这一阵子由于项目需要,需要在项目某页面下加一个打印的功能,在网上查过之后,知道了window.print 这个函数,这个函数可以很方便的打印当前窗口中的内容, 但是这个有时候并不能满足广大用户的需求: ...
使用jqprint插件实现打印页面内容
业务场景客户需要在页面有一个打印按钮,点击之后可以打印Echarts图表的内容以及文字提示信息,经谷歌搜索发现,实现方法大概有三种之多,其他两种不太熟悉,而采用的这种打印方式是一个在jQuery的基 ...
VUE使用lodop实现前端打印页面指定内容
最近做项目,遇到一个需要页面无需下载在线打印Word的功能,最初尝试直接打印页面,会导致将整个页面都打印出来,不符合要求.后期客户要求要使用lodop,这样打印与页面展示Word两个方面都是未知的东西 ...
js打印页面指定区域内容
2种方式: 一种只支持IE浏览器另一种支持各类浏览器 <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...

前端实现打印页面的指定内容 + 快递面单的模板

前端实现打印页面的指定内容 + 快递面单的模板相关推荐

最新文章

热门文章