Vue使用Print插件实现页面打印
示例
官网地址可以下载最新版
官网
下载 npm 安装
npm install print-js --save
npm安装时将库导入项目(main.js)
import print from 'print-js'
首先，我们需要在页面上包含Print.js库和样式(这个可以不用)
<script src="print.js"></script><link rel="stylesheet" type="text/css" href="print.css">
vue页面使用方法
//参数名 : 值printJS({printable: ``,type: "html",targetStyles: ["*"],globalStyles: true,mediaPrint: false,noPrintSeletot: "",});
打印列表案例
<!-- 打印弹框 --><el-dialog title="打印" :visible.sync="visiblePrint" width="60%"><print ref="print" :childData="printData" :feet="true"></print><span slot="footer" class="dialog-footer"><el-button @click="visiblePrint = false">取 消</el-button><el-button type="primary" @click="confirmPrint">确 定</el-button></span></el-dialog>
打印组件
<template><div class="table"><div :id="`printJS-html${childData.merchant_id}`"><div style="line-height:60px;font-size:28px;text-align:center;font-weight: bold;">驿站送货单</div><div class="print-note"><div>站点名称:大厦大厦,截止时间:-08-21,订单数5</div><div style="text-align:right">配送时间:-08-01 17:00-18:00</div></div><div class="print-note"><div>详细地址:大厦大厦,截止时间:-08-21</div></div><!-- 驿站具体清单 --><table border="1" cellpadding="0" cellspacing="0"><tr class="row-item"><th>短编号</th><th>收货人</th><th>详细地址</th><th>联系方式</th><th>配送方式</th><th>商品数量(件)</th><th>下单时间</th><th>订单号</th></tr><tr class="row-item" v-for="(item, index1) in [childData]" :key="index1"><td>{{index1 + 1 }}</td><td>{{item.create_time }}</td><td>{{item.stall_no }}</td><td>{{item.merchant_name }}</td><td>{{item.merchant_mobile_phone }}</td><td>{{item.type == 1 ? '水费' : '电费' }}</td><td>{{item.money }}</td><td>{{item.source }}</td></tr></table></div></div></template><script>export default {// name: "cl",components: {},props: {childData: {type: Object,default: {},},},data() {return {};},computed: {},watch: {},created() {//返回的数据console.log(this.childData);},methods: {onPrint() {printJS({printable: `printJS-html${this.childData.sub_type}`,type: 'html',targetStyles: ['*'],});},},};</script><style scoped>div[id*='printJS-html'] {/* width: 800px; */width: 100%;background: #ffffff;font-size: 14px !important;box-sizing: border-box;color: #000;}div[id*='printJS-html'] table {/* width: 500px; */width: calc(100% - 4px);text-align: center;font-size: 14px !important;box-sizing: border-box;}div[id*='printJS-html'] .foot {display: flex;line-height: 20px;font-size: 14px !important;}.line {width: 100px;display: inline-block;border-bottom: 1px solid #000;}.print-note {display: flex;justify-content: space-between;font-size: 14px;padding-bottom: 10px;}.print-note div {width: 100%;}.row-item {line-height: 30px;}</style>
具体实现
//打印const visiblePrint = ref(false);const printData = ref({});const print = ref(null);function handlePrint() {visiblePrint.value = true;}function confirmPrint() {print.value.onPrint();}
下面主要介绍一下我们要用的打印方法printJS();
printJS()将接受一个对象作为参数，下面表格的参数则为该对象的属性,通过控制属性值来控制打印;
参数 默认值 说明
printable: null 文档来源：pdf或图像的url，html元素的id或json数据的对象
type: PDF 可打印类型。可用的打印选项包括：pdf，html，image，json和raw-html。
header:null 用于HTML，Image或JSON打印的可选标头。它将放在页面顶部。此属性将接受文本或原始HTML
headerStyle:‘font-weight：300;’ 要应用于标题文本的可选标题样式
maxWidth:800 最大文档宽度（像素）。根据需要更改此项。在打印HTML，图像或JSON时使用。
css:null 这允许我们传递一个或多个应该应用于正在打印的html的css文件URL。值可以是包含单个URL的字符串，也可以是包含多个URL的数组。
style:null 这允许我们传递一个字符串，该字符串应该应用于正在打印的html。
scanStyles:true 设置为false时，库不会处理应用于正在打印的html的样式。使用css参数时很有用。
targetStyle:null 默认情况下，在打印HTML元素时，库仅处理某些样式。此选项允许您传递要处理的样式数组。例如：[‘padding-top’，‘border-bottom’]
targetStyles:null 与targetStyle相同，这将处理任何一系列样式。例如：[‘border’，‘padding’]，将包括’border-bottom’，‘border-top’，‘border-left’，‘border-right’，‘padding-top’等。你也可以传递[’*']来处理所有样式
ignoreElements:[] 接受打印父html元素时应忽略的html的id数组。
properties:null 在打印JSON时使用。这些是对象属性名称。
gridHeaderStyle:‘font-weight：bold;’ 打印JSON数据时网格标题的可选样式。
gridStyle:‘border: 1px solid lightgray; margin-bottom: -1px;’ 打印JSON数据时网格行的可选样式
repeatTableHeader:true 在打印JSON数据时使用。设置为时false，数据表标题仅显示在第一页中。
showModal:null 启用此选项可在检索或处理大型PDF文件时显示用户反馈
modalMessage:‘Retrieving Document…’ 当向用户显示的消息showModal被设定为true。
onLoadingStart: null 加载PDF时要执行的功能
onLoadingEnd:null 加载PDF后要执行的功能
documentTitle:‘Document’ 打印html，image或json时，它将显示为文档标题。如果用户尝试将打印作业保存为pdf文件，它也将是文档的名称。
fallbackPrintable:null 打印pdf时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开pdf。这允许您传递要打开的不同pdf文档，而不是传递给printable的原始文档。如果您在备用pdf文件中注入javascript，这可能很有用。
onPdfOpen :null 打印pdf时，如果浏览器不兼容（检查浏览器兼容性表），库将在新选项卡中打开pdf。可以在此处传递回调函数，这将在发生这种情况时执行。在您想要处理打印流程，更新用户界面等的某些情况下，它可能很有用。
onPrintDialogClose:null 关闭浏览器打印对话框后执行回调功能
onError:error => throw error 发生错误时要执行的回调函数。
base64:false 在打印作为base64数据传递的PDF文档时使用
honorMarginPadding(不建议使用):true 这用于保留或删除正在打印的元素的填充和边距。有时这些样式设置在屏幕上很棒，但在打印时看起来很糟糕。您可以通过将其设置为false来删除它。
honorColor(不建议使用): false 要以彩色打印文本，请将此属性设置为true。默认情况下，所有文本都将以黑色打印。
font(不建议使用):‘TimesNewRoman’ 打印HTML或JSON时使用的字体
font_size(不建议使用):‘12pt’ 打印HTML或JSON时使用的字体大小
imageStyle (不建议使用):‘width:100%;’ 打印图像时使用。接受包含要应用于每个图像的自定义样式的字符串。
frameId:null print.js会将要打印的内容复制到一个新的Frame中,此参数是frame的id值
