js网页打印
vue3
<template> <el-dialog :title="dialogTitle" :draggable="false" v-model="dialogVisible" :show-close="false" :width="dyWid" style="margin-top: 10vh;border-radius: 15px;"> <template #header="{ close, titleId }"> <div class="my-header" style="display:flex;justify-content:space-between;"> <h3 :id="titleId" class="font-medium titleClass">{{ dialogTitle }}</h3> <div v-show="dyShow"> <Icon class="is-hover cursor-pointer" icon="ep:close" hover-color="var(--el-color-primary)" :size="20" color="var(--el-color-info)" @click.stop="close" style="margin-top:10px;margin-right:20px;"/> </div> </div> </template> <div class="space-y-6" v-loading="diaLoading"> <el-row> <el-col :span="24"> <el-card class="mb-4" shadow="never" style="border:none;"> <template #header> <div style="display:flex;justify-content:center;"> <h1>{{ formData.ctName }}</h1> </div> </template> <div class="dayin" v-show="dyShow"> <el-button @click="dayin">打印</el-button> </div> <div class="riqi"> <span class="text-gray-600 flex items-center"> <el-icon class="mr-2 text-green-400"> <Calendar /> </el-icon> 年份: </span> <span class="font-medium">{{ formData.ctYear }}</span> </div> <div> <el-row class="mtb20"> <el-col :span="24" class="wztop"> <div class="flex flex-wrap"> <div> <h2 class="font-medium mb10">安全职责描述：</h2> <div class="mb20">{{ formData.safetyDuties }}</div> </div> </div> </el-col> </el-row> <el-row class="mtb20"> <el-col :span="24" class="wztop"> <div class="flex flex-wrap"> <div> <h2 class="font-medium mb10">责任清单：</h2> <div class="text-sm text-gray-600 mt-1" v-html="formData.dutyChecklist"></div> </div> </div> </el-col> </el-row> <el-row class="mtb20"> <el-col :span="12" class="wztop"> <div> <h2 class="font-medium mb10">甲方信息：</h2> <div class="space-y-2"> <div class="flex"> <span class="text-gray-600">甲方代表：</span> <span class="font-medium">{{ formData.partyAName }}</span> </div> <div class="flex"> <span class="text-gray-600">甲方组织：</span> <span class="font-medium">{{ formData.partyAOrgName }}</span> </div> <div class="flex"> <span class="text-gray-600">甲方部门：</span> <span class="font-medium">{{ formData.partyADepName }}</span> </div> </div> </div> </el-col> <el-col :span="12" class="wztop"> <div> <h2 class="font-medium mb10">乙方信息：</h2> <div class="space-y-2"> <div class="flex"> <span class="text-gray-600">乙方代表：</span> <span class="font-medium">{{ formData.partyBName }}</span> </div> <div class="flex"> <span class="text-gray-600">乙方组织：</span> <span class="font-medium">{{ formData.partyBOrgName }}</span> </div> <div class="flex"> <span class="text-gray-600">乙方部门：</span> <span class="font-medium">{{ formData.partyBDepName }}</span> </div> </div> </div> </el-col> </el-row> <div class="flex flex-wrap"> <div> <h2 class="font-medium mb10">签署信息：</h2> </div> </div> <el-row> <el-col :span="12" class="wztop"> 甲方签名： <el-image :src="partyASrc" v-show="partyASrc" style="width:200px;"> <template #error> <div></div> </template> </el-image> </el-col> <el-col :span="12" class="wztop"> 乙方签名： <el-image :src="partyBSrc" v-show="partyBSrc" style="width:200px;"> <template #error> <div></div> </template> </el-image> </el-col> </el-row> <el-row class="mtb20"> <el-col :span="12"> 签署时间：{{ formatDateToYMD(formData.partyASignTm) }} </el-col> <el-col :span="12"> 签署时间：{{ formatDateToYMD(formData.partyBSignTm) }} </el-col> </el-row> </div> </el-card> </el-col> </el-row> </div> </el-dialog> </template> <script setup lang="ts"> import { ContractApi, ContractVO } from '@/api/safe/contract' import { DICT_TYPE, getStrDictOptions } from '@/utils/dict' import { ref } from 'vue' import { Calendar, Collection, EditPen } from '@element-plus/icons-vue' /** 安全生产责任书 表单 */ defineOptions({ name: 'ContractDetail' }) const { t } = useI18n() // 国际化 const message = useMessage() // 消息弹窗 const dialogVisible = ref(false) // 弹窗的是否展示 const dialogTitle = ref('') // 弹窗的标题 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 const formType = ref('') // 表单的类型：create - 新增；update - 修改 const formData = ref({ id: undefined, // 安全责任书唯一标识 createTime: undefined, // 创建时间 ctYear: undefined, // 安全责任书年份 ctName: undefined, // 安全责任书名称 partyAOrgId: undefined, // 甲方单位ID partyAOrgName: undefined, // 甲方单位名称 partyADepId: undefined, // 甲方部门ID partyADepName: undefined, // 甲方部门名称 partyBOrgId: undefined, // 乙方单位ID partyBOrgName: undefined, // 乙方单位名称 partyBDepId: undefined, // 乙方部门ID partyBDepName: undefined, // 乙方部门名称 partyA: undefined, // 甲方负责人 partyAName: undefined, // 甲方负责人姓名 partyB: undefined, // 乙方负责人 partyBName: undefined, // 乙方负责人姓名 ctCreateTm: undefined, // 安全责任书创建日期 ctSignTm: undefined, // 安全责任书签订日期 status: undefined, // 安全责任书状态（草稿/已下发/已签署/已过期） signatureA: undefined, // 甲方签名 signatureB: undefined, // 乙方签名 safetyDuties: undefined, // 安全职责 dutyChecklist: undefined, // 责任清单 indicatorSelect: [] // }) const formRef = ref() // 表单 Ref let dyWid = ref('55%') const showPreviewA = ref(false) const showPreviewB = ref(false) let partyASrcList = [] let partyBSrcList = [] let partyASrc = '' let partyBSrc = '' let qmImg = 'http://120.27.114.114:9404/admin-api/infra/file/23/get/20251028/签名_1761634452273.png' const diaLoading = ref(true) /** 打开弹窗 */ const open = async (id: number, name: string) => { dialogVisible.value = true diaLoading.value = true // dialogTitle.value = t('action.' + type) dialogTitle.value = '详情' // formType.value = type resetForm() // 修改时，设置数据 if (id) { formLoading.value = true try { formData.value = await ContractApi.getContract(id) partyASrcList = [] partyBSrcList = [] partyASrc = '' partyBSrc = '' if (formData.value.signatureA) { partyASrcList.push(formData.value.signatureA) partyASrc = formData.value.signatureA } if (formData.value.signatureB) { partyBSrcList.push(formData.value.signatureB) partyBSrc = formData.value.signatureB } diaLoading.value = false } finally { diaLoading.value = false formLoading.value = false } } } defineExpose({ open }) // 提供 open 方法，用于打开弹窗 // 根据字典返回字典标签 const getDictLabelStatus = (rowStatus) => { if (!rowStatus) return '' if (!getStrDictOptions(DICT_TYPE.SAFE_CONTRACT_STATUS)) return '' return { resColor: getStrDictOptions(DICT_TYPE.SAFE_CONTRACT_STATUS).find((item) => item.value === rowStatus)?.colorType, resLabel: getStrDictOptions(DICT_TYPE.SAFE_CONTRACT_STATUS).find((item) => item.value === rowStatus)?.label } } // 定义格式化函数 const formatDateToYMD = (time) => { if (!time) return '' const date = new Date(time) if (isNaN(date.getTime())) return '' const year = date.getFullYear() const month = String(date.getMonth() + 1).padStart(2, '0') const day = String(date.getDate()).padStart(2, '0') return `${year}年${month}月${day}日` } let dyShow = ref(true) let dayin = ()=>{ dyWid.value = '100%' dialogTitle.value = '' dyShow.value = false nextTick(()=>{ window.print() setTimeout(()=>{ dyWid.value = '55%' dialogTitle.value = '详情' dyShow.value = true },200) }) } </script> <style scoped> .mtb20{ margin-top: 20px; margin-bottom: 20px; } .mb10{margin-bottom: 10px;} .mb20{margin-bottom: 20px;} .wztop{ display: flex; flex-direction: row; align-items: top; } .riqi{ position:absolute; right:0; top:45px; width:110px; display: flex; flex-direction: row; } .dayin{ position:absolute; right:0; top:0; width:85px; } .my-header { display: flex; flex-direction: row; justify-content: space-between; gap: 16px; } .titleClass{ margin-top:10px;margin-left:20px; }
打印时清除页眉页脚 @media print { @page { margin: 0; /* 移除默认边距，页眉页脚通常在其中 */ } body { margin: 1cm; /* 如果需要内容边距，可以单独设置 */ } } </style>
window.print();打印会出现图片不在打印预览显示，不打印的问题，需要用 jqprint 插件
jquery.jqprint-0.3.js https://www.jq22.com/jquery-info347 要在jq之后引用
2009年版本会有兼容性问题，之前加一段
预览的页面字号不起作用了，需要在jqprint中写入
如果页面有横向滚动而打印时不想显示滚动条，需要在jqprint中写入
jQuery.browser={}; (function(){ jQuery.browser.msie=false; jQuery.browser.version=0; if(navigator.userAgent.match(/MSIE ([0-9]+)./)){ jQuery.browser.msie=true; jQuery.browser.version=RegExp.$1; } })(); (function($) { var opt; $.fn.jqprint = function (options) { opt = $.extend({}, $.fn.jqprint.defaults, options); var $element = (this instanceof jQuery) ? this : $(this); if (opt.operaSupport && $.browser.opera) { var tab = window.open("","jqPrint-preview"); tab.document.open(); var doc = tab.document; } else { var $iframe = $("<iframe />"); if (!opt.debug) { $iframe.css({ position: "absolute", width: "0px", height: "0px", left: "-600px", top: "-600px" }); } $iframe.appendTo("body"); var doc = $iframe[0].contentWindow.document; } if (opt.importCSS) { if ($("link[media=print]").length > 0) { $("link[media=print]").each( function() { doc.write("<link rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />"); }); } else { //加载页面引用的样式表 $("link").each( function() { doc.write("<link href='" + $(this).attr("href") + "' rel='stylesheet' />"); }); doc.write("<style type='text/css'>td,th { font-size: 13px; }</style>"); } } //console.log(doc); if (opt.printContainer) { doc.write($element.outer()); } else { $element.each( function() { doc.write($(this).html()); }); } doc.close(); //培训详情弹开打印预览立即恢复学习照片滚动效果 if($("#tdwid")[0] != undefined){ var tdwid = $("#tdwid")[0].clientWidth - 10; $("#divwid").css({'width':tdwid+'px','overflow-x':'auto'}); }; if($("#tdwid1")[0] != undefined){ var tdwid1 = $("#tdwid1")[0].clientWidth - 10; $("#divwid1").css({'width':tdwid1+'px','overflow-x':'auto'}); }; (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).focus(); setTimeout( function() { (opt.operaSupport && $.browser.opera ? tab : $iframe[0].contentWindow).print(); if (tab) { tab.close(); } }, 1000); } $.fn.jqprint.defaults = { debug: false, importCSS: true, printContainer: true, operaSupport: true }; // Thanks to 9__, found at http://users.livejournal.com/9__/380664.html jQuery.fn.outer = function() { return $($('<div></div>').html(this.clone())).html(); } })(jQuery);
打印带有背景色效果的需要加样式
/*打印背景色*/ @media all { .dybg { background-color: #eeeeee !important; -webkit-print-color-adjust:exact; -moz-print-color-adjust:exact; -ms-print-color-adjust:exact; print-color-adjust:exact; } .trrbg { background-color: #ffe5e3 !important; -webkit-print-color-adjust:exact; -moz-print-color-adjust:exact; -ms-print-color-adjust:exact; print-color-adjust:exact; } }
另外，如果横向滚动容器宽度不确定，需要通过js计算赋值，在获取渲染时，填充完列表立即更改宽度，在点击打印预览时修改宽度，在jqprint实例创建完后再改回原来效果
//拼好字符串，立即计算容器宽度 var tdwid = $("#tdwid")[0].clientWidth - 10; $("#divwid").css('width',tdwid+'px'); function TPD_dodoPrint(){ //打印预览立即更改宽度并隐藏横向滚动条 $("#divwid").css({'width':'700px','overflow-x':'hidden'}); //$("#divwid1").css({'width':'700px','overflow-x':'hidden'}); $("#TPD_print-area").jqprint({ debug: false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件） printContainer: true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。 operaSupport: true//表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true }); }
__________________________________________________________________________________
打印表格的时候多页会出现头尾断线的情况，尤其有表头和标题时，
第一页和后面的表格页情况不一样，所以要计算单元格高度，表头高度，标题栏高度，
表格在循环时要做css判断取余行数来改变样式
<div class="ClaimFormEndorsement_contentdayin" style="width:100%;top:10px;left:0;"> <div class="ClaimFormEndorsement_content_fukuan" style="cursor:pointer;margin-right: 50px;" onclick="doPrint()">打印</div> <div style="width:100%;height:700px;overflow-y:auto;margin:0;padding:0;page-break-inside:avoid;" id="printdeliveryView"> <table class="ClaimFormEndorsement_listdy1" id="tableyue" style="width:96%;margin-left: 2%;margin-bottom: 30px;"> <tr> <td colspan="7" style="line-height: 22px;"> <div style="height: 26px;margin-top:17px;margin-bottom:8px;font-size:24px;"><b>表</b></div> <div style="height: 26px;margin-top:8px;margin-bottom:8px;font-size:14px;" id="curDate"></div> </td> </tr> <tbody id="ClaimFormEndorsement_Tab"> <tr class="fbo trrbg" style="height: 35px;line-height: 35px;"> <th style="width:12%;"> <div>日期</div> </th> <th style="width:22%;"> <div>单号</div> </th> <th style="width:7%;"> <div>页码</div> </th> <th style="width:10%;"> <div>责任类别</div> </th> <th style="width:25%;"> <div>责任人</div> </th> <th style="width:13%;"> <div>承担金额</div> </th> <th style="width:11%;"> <div>审批人</div> </th> </tr> <!-- ko foreach:rows --> <tr class="basic_table_trbg dayinTd" data-bind="css:{basic_table_trbg:($index()%2==0),dayinGD:($index()%30==29)}"> <td style="width:12%;" data-bind="text:FormatDate(Create_Date)"></td> <td style="width:22%;" data-bind="text:ClaimID"></td> <td style="width:7%;" data-bind="text:Pg"></td> <td style="width:10%;" data-bind="text:LiableType==1?'员工':'承运商'"></td> <td style="width:25%;" data-bind="text:LiableName"></td> <td style="width:13%;text-align: right; padding-right: 10px;" data-bind="text:LiableAmount.toFixed(2)"></td> <td style="width:11%;" data-bind="text:ExamineSubUserName"></td> </tr> <!-- /ko --> </tbody> </table> </div> </div>
function doPrint() { var headhtml = "<html><head><title></title></head><body>"; var foothtml = "</body>"; // 获取div中的html内容，jquery写法如下 $("#printdeliveryView").css({'height':'auto'})//进入网页打印设置时把高度去掉，否则只有一页还带有滚动条 var newhtml = $("#printdeliveryView").html(); // 获取原来的窗口界面body的html内容，并保存起来 var oldhtml = document.body.innerHTML; $(".ClaimFormEndorsement_content_fukuan").css({"display":"none"}); // 调用window.print方法打印新窗口 window.print(); $(".ClaimFormEndorsement_content_fukuan").css({"display":"block"}) $("#printdeliveryView").css({'height':'700px'})//关闭网页打印设置页面要把高度加回来，否则没有滚动条 }
/*打印*/ .ClaimFormEndorsement_contentdayin{ position:absolute; left:30px; top:30px; width:89%; height:680px; border:none; background-color:white; } .ClaimFormEndorsement_content_title{ text-align:center; } .ClaimFormEndorsement_content_fukuan{ position:absolute; right:30px; top:20px; width:100px; height:30px; line-height:30px; background-color:rgb(46,187,202); border-radius:3px; color:white; font-size:12px; text-align:center; z-index:10; } .ClaimFormEndorsement_listdy1{ width:98%; margin-left:0; border:1px solid gray; font-size:12px; } .ClaimFormEndorsement_listdy1 th{ height:30px; line-height:30px; text-align:center; border:1px solid #333333; /*background-color:rgb(236,236,236);*/ width:120px; } .ClaimFormEndorsement_listdy1 td{ /*height:30px;*/ padding: 2px; line-height:14px; text-align:center; border:1px solid #333333 }//每个单元格间距 .dayinTd td{ padding-top: 10px; padding-bottom: 10px; } //30行取余时的单元格间距
.dayinGD td{ padding-top: 8px; padding-bottom: 8px; } /*打印头部背景色*/ @media all { .trrbg { background-color: #cccccc !important; -webkit-print-color-adjust: exact; } }
打印默认横向
MVC: <style type="text/css" media="print"> @("@")page {size:landscape;} </style> 普通: <style type="text/css" media="print"> @page {size:landscape;} </style>
try{ print.portrait = false; } catch (e){ } window.print();
打印的dom节点 加个样式 page-break-after: always
在 <footer> 元素后始终插入分页符:
@media print { footer {page-break-after: always;} }
auto 默认。如果必要则在元素后插入分页符。
always 在元素后插入分页符。
avoid 避免在元素后插入分页符。
left 在元素之后足够的分页符，一直到一张空白的左页为止。
right 在元素之后足够的分页符，一直到一张空白的右页为止。
inherit 规定应该从父元素继承 page-break-after 属性的设置。
浙公网安备 33010602011771号