JS实现打印功能(包括打印预览、打印设置等)及如何将一个html页面嵌套在另一个页面中

举报
SHQ5785 发表于 2022/12/03 10:03:02 2022/12/03
【摘要】 绪最近在进行项目开发时,需要实现后台管理端打印功能,遂在网上一阵搜索,搜到了很多相关的文章。其中绝大部分文章都是使用的Lodop5.0(Web打印和套打控件)控件,而且有些环境下还不能使用。如有想使用此控件实现打印功能的盆友,可点击进行下载。但我强烈推荐下面的方法,即利用系统本身的打印属性实现打印功能。简单的一条系统调用命令即可实现。前提条件:进行的电脑必须连接有打印机,至于判断PC是否连接...

最近在进行项目开发时,需要实现后台管理端打印功能,遂在网上一阵搜索,搜到了很多相关的文章。其中绝大部分文章都是使用的Lodop5.0(Web打印和套打控件)控件,而且有些环境下还不能使用。如有想使用此控件实现打印功能的盆友,可点击进行下载。但我强烈推荐下面的方法,即利用系统本身的打印属性实现打印功能。简单的一条系统调用命令即可实现。

前提条件:

进行的电脑必须连接有打印机,至于判断PC是否连接打印机的问题还未能解决,欢迎有解决方法的朋友留言,小生不胜感激!

代码

介绍两个关键的css

<style media="print">

         .Noprint { DISPLAY: none }

         .PageNext{ PAGE-BREAK-AFTER: always }

 </style>

第一个在不需要打印的标签上添加(子标签也将不被打印),第二个在需要换行的标签处添加(该标签所表示的内容将在当前打印的一页内)

基本的做法就是直接调用系统打印功能,如下代码所示:

window.print();

就可实现页面局部打印了,很easy吧!而且可以实现打印预览、设置等操作。

如何将一个html页面嵌套在另一个页面中

1.IFrame引入 

<IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 marginheight=0 SRC="import.htm" ></IFRAME> 

你会看到一个外部引入的文件,但会发现有一个类似外框的东西将其包围,可使用

<iframe name="content_frame" marginwidth=0 marginheight=0 width=100% height=30 src="import.htm" frameborder=0></iframe> 

2.<object>方式

<object style="border:0px" type="text/x-scriptlet" data="import.htm" width=100% height=30></object>

3.Behavior的download方式

<span id=showImport></span> 

<IE:Download ID="oDownload" STYLE="behavior:url(#default#download)" /> 

<script> 

function onDownloadDone(downDate){ 

showImport.innerHTML=downDate 

} 

oDownload.startDownload('import.htm',onDownloadDone) 

</script> 
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。