前端js打印html预览时样式发生改变

2024-11-04

JS Web打印，实现预览新样式

问题描述: JS实现Web打印,要求打印前一种样式,打印预览时新样式问题解决: (1)设置打印时的css样式,设置打印前的css样式注: 以上为print.css打印时的css样式,其中display可以设置当前的css对象是否可见,设置上述css样式为打印时的样式: 如上所示,添加media="print",就可以设置此css样式文件为打印时可见. 注: 以上为当前页面的样式,起初是隐藏的,在打印预览时,希望显示出来,打印时

JS打印、预览（IE，Chrome）

IE下: 调用IE内置打印组件完成web打印方案.IE调用ActiveX实现打印. 重点: 注意: 1.CSS对打印的控制: .Noprint{display:none;} .PageNext{page-break-after: always;} Noprint样式可以使页面上的打印按钮等不出现在打印页面上,这一点非常重要,因为它可以用最少的代码完成最需要的功能 PageNext样式可以设置分页,在需要分页的地方就OK了. 2.表格线粗细的设置,更是通过样式表: .tdp { border-b

使用PDF.JS实现pdf文件在线预览时，报文件被损坏的错误

首先大概说明一下问题出现的背景:我用PDF.JS实现文件在线预览,参考网上的办法,在jsp文件中使用 <iframe src="<c:url value="js/generic/web/viewer.html" />?file=<c:url value="${wjlj}" />" width="1024" height="700"> 将文件路径以${wjlj}的方式交给p

JS页面打印，预览，设置，分页

一)在HTML页中加载打印对象 <object id="WebBrowser" width="0" height="0" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></object> 二)实现打印.预览.设置功能 <input type="button" value="打印" onclick=&

兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/Headphoto/noperson.jpg" style="width: 160px; height: 170px;border: solid 1px #d2e2e2;" alt="" /> </div> <asp:FileUpload

js本地图片预览代码兼容所有浏览器

html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id="imgHeadPhoto" src="www.niyuewo.com" style="width: 160px; height: 170px;border: solid 1px #d2e2e2;" alt="" /> &

PrintDocument打印、预览、打印机设置和打印属性的方法

WindowsForm 使用 PrintDocument打印.预览.打印机设置和打印属性的方法. private void Form1_Load(object sender, System.EventArgs e) { //获取或设置一个值,该值指示是否发送到文件或端口 printDocument1.PrinterSettings.PrintToFile = true; //设置打印时横向还是纵向 printDocument1.DefaultPageSettings.Landscape = tr

RDLC 图形报表预览时 “本地报表处理期间错误”

在RDLC报表中有图形报表的导出和打印都正常,但预览时"本地报表处理期间错误",这是因为你设置的图形太宽已经超过默认的A4 纸的宽度,解决办法:报表页面的报表--->报表属性把边距设置小些,和图形宽度设置小些就可以了

在TVideoGrabber中如何在预览时设置相机属性

在使用TVideoGrabber进行预览时,如何设置相机的属性呢?比如曝光.对比度.亮度等. 下面来看一下,如何通过编程来调整这些设置: ——通过指定VideoDevice属性(在VideoDevices列表中视频捕获设备的指数)选择视频捕捉设备 ——对每个设置调用的SetCameraControl ( ... )或SetVideoQuality ( ...)功能,来调整亮度.对比度.自动曝光功能等等. ——用IsVideoQualitySettingAvailable.VideoQuality

解决在IE里预览时弹出:为了有利于保护安全性......

用Dreamweaver做网页,在IE里预览时弹出这个:为了有利于保护安全性,Internet Explorer 已限制此网页运行可以访问计算机的脚本或ActiveX控件. 在页面顶部加段代码就可以了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=&qu

停止预览时调用Camera.release(), 出现Method called after release()异常问题原因及解决办法

如下代码: private void stopPreview() { Log.w(TAG, "stopPreview(), _isPreviewing = " + _isPreviewing + ", _mCamera = " + _mCamera); if (_isPreviewing && _mCamera != null) { _mCamera.stopPreview(); /** * Note: 一定要调用 _mCamera.setPrevi

js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> </head> <body> <div id="divPrevie

使用CAD快速看图如何将图纸打印和预览？

有相关CAD工作经验的小伙伴们都知道,绘制完CAD图纸后是需要借助CAD看图工具来进行查看图纸的,其实CAD快速看图中不仅能够对图纸进行查看,还能够将CAD图纸进行打印出来.但是有很多的伙伴不知道要怎么来进行操作?下面小编就来教大家在CAD快速看图中将图纸打印和预览的方法.想要了解的朋友可以来看看. 设置图纸打开方式: 1．首先在电脑桌面中找到迅捷CAD看图软件进行启动,打开后软件就会进入到使用界面中,先设置一下图纸的打开方式.避免图纸打开后看不全的情况出现. 2.点击左上角的“设置”选项,设置

对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)

前言本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文使用方式同样很简单,首先创建HTML容器如下: <div id="uploader" class="uploaderPic"> </div> 然后页面加载完成后渲染: $(function () { $("#uploader").pow

JavaScript进阶(八)JS实现图片预览并导入服务器功能

JS实现导入文件功能赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉!(PS:此篇博文是自己在午饭时间所写,为此没吃午饭,这就是程序猿的生活.) 项目开发过程中,需要实现文件上传功能.借此机会学习之. 使用HTML中现有的input type "file"可以支持这一功能.如下所示: <input ng-model="url" id="url" type="file

纯JS实现图片预览与等比例缩放和居中

最近做项目时有一个需求,广告位图片上传时要预览,并且要等比例缩放和居中.已经保存的广告位图片显示时也要等比例缩放和居中.我使用了下面的代码实现,不过可能有一些小问题. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Re

C# 中printDocument打印、预览、打印机设置和打印属性的方法

private void Form1_Load(object sender, System.EventArgs e) { //获取或设置一个值,该值指示是否发送到文件或端口 printDocument1.PrinterSettings.PrintToFile = true; //设置打印时横向还是纵向 printDocument1.DefaultPageSettings.Landscape = true; } private void fileOpenMenuItem_Click(object

原生js实现图片预览并上传

最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所以连html5的新属性formData都用不了,纯原生js实现. 首先获取input输入框,并给其注册onchange事件. uploadImage(){ let idCardFrontParams={ showID: "img-box1", flag: "idCardFront

JS实现图片预览与等比缩放

案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: table-cell;垂直居中*@ <div id="img-dialog" style="text-align:center;vertical-align: middle;display: table-cell;padding:5px;"> <img id=

Vue项目用webpack打包后，预览时资源路径出错（文末有vue项目链接分享）

最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. -------------------------------------------------- 分割线 -------------------------------------------------- 一.项目打包过程: 1.vue项目写完后,首先在项目路径下的命令行中运行:npm run build,看到Build complete即表示项目打包完成: 然后,回到

前端js打印html预览时样式发生改变

热门专题