开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js调用打印预览

在JavaScript中实现打印预览功能，通常会涉及到window.print()方法以及CSS的打印样式控制。

基础概念：

window.print()：这是浏览器提供的一个方法，用于调用打印预览或实际打印当前页面。
CSS打印样式：通过媒体查询@media print，可以为打印时的页面指定特殊的样式，比如隐藏不必要的元素、调整布局等。

相关优势：

用户可以在打印前查看文档的外观，确保打印效果符合预期。
可以通过CSS优化打印布局，节省纸张和提高可读性。

应用场景：

报表生成：在网页上生成报表后，用户可以通过打印预览确认报表格式，然后进行打印。
文档编辑：在线文档编辑器中，用户可以在打印前预览文档的打印效果。
电子商务网站：商品详情页提供打印预览，方便用户打印商品信息。

如何实现：

在HTML中添加一个按钮，用于触发打印预览：

<button onclick="previewPrint()">打印预览</button>

在JavaScript中定义previewPrint函数：

function previewPrint() {
  window.print();
}

使用CSS媒体查询来控制打印样式：

@media print {
  /* 隐藏不需要打印的元素 */
  .no-print, .header, .footer {
    display: none;
  }
  /* 调整打印样式 */
  body {
    font-size: 12pt;
  }
  /* 其他打印样式 */
}

常见问题及解决方法：

打印预览与实际打印效果不一致：可能是由于CSS样式没有正确应用到打印预览中。检查@media print中的样式是否正确设置，并确保没有其他CSS规则覆盖了这些设置。
打印预览时页面布局混乱：检查是否有使用绝对定位或固定定位的元素，这些在打印时可能会导致布局问题。可以通过调整CSS或使用流式布局来解决。
打印预览中图片不显示：确保图片的URL是绝对路径，因为相对路径在打印时可能无法正确解析。另外，检查图片是否有适当的宽度和高度设置，以避免打印时图片过大或过小。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打印预览示例</title>
<style>
@media print {
  .no-print, .header, .footer {
    display: none;
  }
  body {
    font-size: 12pt;
  }
}
</style>
</head>
<body>
<div class="header">这是页头，不会被打印</div>
<div>
  <h1>文档标题</h1>
  <p>这是一段文本内容。</p>
  <img src="image.jpg" alt="示例图片" style="width:100%;">
</div>
<div class="footer">这是页脚，不会被打印</div>
<button class="no-print" onclick="previewPrint()">打印预览</button>

<script>
function previewPrint() {
  window.print();
}
</script>
</body>
</html>

在这个示例中，点击“打印预览”按钮会触发浏览器的打印预览功能，同时页面上的页头、页脚和按钮不会出现在打印预览中。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js调用ie打印

-340A-11D0-A96B-00C04FD705A2" height="0" width="0"> 打印..." οnclick="document.all.WebBrowser.ExecWB(6,1)"> 打印" οnclick="document.all.WebBrowser.ExecWB...="button" value="页面设置" οnclick="document.all.WebBrowser.ExecWB(8,1)"> 打印...OK" οnclick=" return myprint(this);"> 打印预览" οnclick="document.all.WebBrowser.ExecWB

25.6K3 0

调用IE打印

CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0> 打印... οnclick=document.all.WebBrowser.ExecWB(6,1)> 打印 οnclick=document.all.WebBrowser.ExecWB...type=button value=页面设置 οnclick=document.all.WebBrowser.ExecWB(8,1)> 打印...OK" οnclick=" return myprint(this);"> 打印预览 οnclick

1.5K4 0

PyQt5 字体颜色打印打印预览对话框

本篇介绍PyQt5 的字体选择对话框，颜色选择对话框，打印预览对话框，和打印对话框。...__init__() self.initUI() def initUI(self): self.setWindowTitle("PyQt5 颜色/字体/打印相关对话框...bt2 = QPushButton("颜色对话框(字体颜色)") bt2_ = QPushButton("字体背景颜色") bt3 = QPushButton("打印预览对话框...color.isValid(): self.textEdit.setTextBackgroundColor (color) def printPreview(self):#打印预览...，无预览 printer = QPrinter() dialog = QPrintDialog(printer, self) if dialog.exec

4.1K5 1

图片上传预览js

DOCTYPE html> js.../jquery.js" type="text/javascript" charset="utf-8">

49K9 0

js上传图片预览

28.2K0 0

js --- 上传图片预览

DOCTYPE html> 图片上传预览功能 <input id='inp' type="file" name

34.8K1 0

Delphi调用驱动打印

如果想开始打印工作可以调用BeginDoc方法。结束一个成功打印的工作需要调用EndDoc过程。如果出现问题需要中断打印可以调用Abort方法。...打印机对象将自动创建和删除。当调用～TPrinter方法时，它将检查是否打印工作都已经结束。如果都结束了就释放资源。例如句柄、字体和画布等，最后关闭打印机并调用继承的析构函数。...调用BeginDoc可以初始化一个打印工作。如果打印工作被成功送入，应用程序将调用EndDoc方法结束打印。打印工作只有在调用EndDoc方法后才实际开始。...调用EndDoc方法将结束打印工作（并关闭当前打开的文体）。打印工作将在EndDoc方法调用结束后开始。在应用程序中调用EndDoc方法后，打印机开始打印。...将一个打印工作成功送入打印机后调用EndDoc方法。如果打印工作没成功，则调用Abort方法。

2.4K3 0

Qt实现Qchart的打印和打印预览的几种方法

实现打印预览和打印，是挺常用的功能。把其他一些内容如QTextBrowser或者QEditText打印和打印预览是容易的，因为它们都自带了print方法，可以直接输出到printer。...这里介绍下Qt实现Qchart的打印和打印预览的几种方法。首选介绍下Qt如何实现打印预览功能。打印预览的实现使用Qt自带的QPrintPreviewDialog和QPrinter。...printer.setPaperSize(QSizeF(600, 800),QPrinter::Point); QPrintPreviewDialog preview(&printer, this);// 创建打印预览对话框...，打印预览_尔容又夏的博客-CSDN博客_qt打印预览 QT实现打印预览及生成Pdf功能_小MarkK的博客-CSDN博客_qt打印pdf 【QT5】QPixmap的使用_&Mr.Gong的博客-CSDN...，打印预览_to.to的博客-CSDN博客

2.2K1 0

三、python调用打印机，打印文字

参考文章： Tim Golden Python Stuff http://timgolden.me.uk/python/win32_how_do_i/pr...

3.9K1 0

JS原生打印

//打印预览 window.print(); /*设置默认横向打印*/ @page { size: landscape; } /*设置默认纵向打印*/ @page { size: portrait

22.5K2 0

图片预览放大js插件

分享一个非常简单的图片预览插件viewer 首先引入js和css viewer.js:下载链接 jquery1.11.3.js:下载链接 jquery-viewer.min.js:下载链接 viewer.css...viewer.css" rel="external nofollow" rel="external nofollow"> js..."> js"> js"></...//缩放等级（1倍) $image.viewer('zoomTo', 1); } }); // 初始化后获取Viewer.js

61.8K3 1

JAVA实现调用打印机打印PDF

JAVA实现调用打印机打印PDF，网上搜索了一大把资料，基本上都是重复。。。下面骂人的一大堆。。我这里来解决一下。需求：前端调用用接口后端根据模版生成数据联通打印机直接一键打印！...思路：这里讲一下打印最好使用pdf去打印。不管是word.excel 都是通过转PDF 再打印出来的。所以我这里的思路就是选择模版生成文件，并且打印。...1、通过vm文件生成html 2、通过html再转成 pdf 3、调用打印机方法打印可能这有人问为啥不用 word模版。我这里说明一个坑。如果是模版网上解决方案基本上是 xml格式的。...html转pdf 中有讲解本文重点介绍调用打印机的方式！调用打印机驱动的我目前实验了网上所有的方法，查了很多资料。大概摸出了两种最有效的方式。...第一种 java调用打印机：在本机安装驱动，利用java代码去调用进行打印。如果你的代码是在服务器上那么就需要在服务器上安装驱动。

13.8K3 1

js实现图片预览翻页

--JQuery在线引用--> js"> <meta

4553 0

backtrace打印函数调用栈

异常调用栈信息跟踪 vpp代码中设置捕捉异常信号的函数unix_signal_handler，对一些信号SIGSEGV、SIGABRT、SIGILL等等会打印出异常的调用栈信息，方便我们定位问题。...异常调用栈信息可以在系统日志中查询。通常我会使用journalctl -n xxx 来查询日志的打印。...在glibc头文件"execinfo.h"中声明了backtrace用于获取当前线程的函数调用堆栈 int backtrace(void **buffer,int size) 该函数用于获取当前线程的调用堆栈.../* 使用 glibc backtrace 函数打印调用栈信息 */ #include uword clib_backtrace (uword * callers, uword...free(strings); //exit(0); } void trace_3() { int * p = NULL; /*为空时表示是异常，触发函数调用栈打印

1.6K3 0

前端报表如何实现无预览打印解决方案或静默打印

因为前端打印，要强依赖与浏览器的打印预览页面，会天然存在以下弊端：每一次打印都要弹出来打印预览对话框，如果前端需要批量打印，那么意味着客户要点击无数个关闭按钮，才能实现批量打印，如果一次性打印几百张上千张的报表...因此如何在前端实现无预览打印，也就是用户点击打印之后直接就使用默认打印机打印出来。针对这个需求，我们验证了一个解决该问题的方案，本贴就来介绍该方案如何实现。...实现思路如下：后端实现一个接口，接收Blob类型PDF流，然后调用系统默认打印机，将PDF进行静默打印。...具体实现步骤：前端实现方法：前端利用ActivereportsJS的PDF.exportDocument无预览导出PDF，该接口返回的result包含data属性和download方法，然后调用后端接口...注意：如果exe只给服务器上部署，那么前端在打印时调用服务器地址接口打印，最终都会从服务器上连接的打印机打出来。

2.6K5 0

Go语言打印调用堆栈

这两天看Go的代码，呃，协程太多，无数个携程调用了一个方法，彻底看不清了，所以就想到是不是可以把调用堆栈打印出来。查了一下，发现Go的 runtime/debug 库可以把调用堆栈打出来。...debug.Stack()) debug.PrintStack() } func main() { test1() } 从上面代码可以看出，可以通过 debug.PrintStack() 直接打印...，也可以通过 debug.Stack() 方法获取堆栈然后自己打印。

2.1K6 0

web调用打印机自动打印_网页打印如何设置默认打印机

（当然，用户有各种各样的需求和打印格式要求，愿意使用打印控件的，开发的打印功能当然很好。）所以直接使用浏览器自带的打印功能，就成为一个选择。 2....打印功能介绍 2.1 普通打印如果要将当前网页的内容直接打印到白纸上，很简单，使用如下js代码即可实现。...你当然可以设计一个只有要打印的数据项的表格，然后通过css来控制元素的位置和字体等格式。也可以结合 2.2.2 的描述将不需要打印的部分隐藏，这样更便于你的打印预览调试。...那样你只需要提前画好一个页面，在要打印的时候使用js将内容或者模板页面路径传给iframe即可。...WEB打印如何设置默认为”仅选定打印框架”?

6.4K2 0

条码打印软件中标签预览正常打印无反应怎么解决

在使用条码打印软件制作标签时，有客户反馈,标签打印预览正常的，但是打印无反应，咨询是怎么回事?今天针对这个情况，可以参考以下方法进行解决。...一、预览正常情况下，打印没反应 (1)在条码打印软件中设计好标签之后，打印预览没有问题的话，是可以直接连接条码打印机进行打印的。...可以检查条码打印软件中的纸张尺寸是否跟条码打印机的实际尺寸一致。或者检查条码软件中的纸张设置是否出现了负数。二、打印预览不正常 (1)在条码打印软件中设计好标签之后，点击打印预览，出现空白页。...打印没反应。 (2)在打印预览空白页界面点击放大或者缩小后标签预览正常，但是连接条码打印机打印的时候，打印机没反应。...如果在条码打印软件中点击打印预览出现以上两种不正常的情况下，可以检查标签及数据源中是否有空对象，如果检查到空对象，可以删除空对象，再预览看效果，预览没有问题的情况下，再连接条码机机进行打印。

2.6K2 0

vue-pdf实现pdf预览、分页、下载、打印

vue-pdf实现pdf预览、分页、下载、打印 vue-pdf-app（功能完整内嵌组件）： https://www.npmjs.com/package/vue-pdf-app vue-pdf使用（参考地址...---------------------(分割线）-------------------------------------------------------------------- 1、pdf预览...vue-pdf-signature 替代vue-pdf 代码如下： npm install --save vue-pdf-signature <el-dialog title="pdf预览...方法 Vue.use(htmlToPdf) 2.3.4 在相关要导出的页面中，点击时调用绑定在Vue原型上的getPdf方法，传入id即可 //html 调用原型方法print() // 打印 print() { console.log(this.

25.6K15 3

JS 实现分页打印

在调用 window.print() 时，可以实现打印效果，但内容太多时要进行分页打印。...在样式中有规定几个打印的样式 page-break-before 和 page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。...每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。...page-break-before 若设定成 always，则是在遇到特定的组件时，打印机会重新开始一个新的打印页。

14.2K2 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭