标签: print-preview

我正在开发一个网站,需要处理打印视图.通常,当我遇到布局问题时,我会使用Chrome的Element Inspector.但是,这在打印预览模式下不存在.

是否有Chrome插件或其他方式来更改Chrome本身的查看媒体,以打印机的形式查看页面？我认为它没有特定于Chrome的解决方案,但这是我的主要浏览器,所以拥有一个浏览器内的解决方案会很不错.

现在我只专注于打印预览媒体,但是能够更改为任何支持的媒体类型(即所有/盲文/浮雕/手持/打印/投影/屏幕/语音/ tty /)是理想的电视).

我需要在网络上模拟A4纸,并允许打印此页面,因为它在浏览器上显示(特别是Chrome).我将元素大小设置为21cm x 29.7cm,但是当我发送到打印(或打印预览)时,它会剪切我的页面.

看到这个实例!

body {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font: 12pt "Tahoma";
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.page {
  width: 21cm;
  min-height: 29.7cm;
  padding: 2cm;
  margin: 1cm auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.subpage {
  padding: 1cm;
  border: 5px red solid;
  height: 256mm;
  outline: 2cm #FFEAEA solid;
}

@page {
  size: A4;
  margin: 0;
}

@media print {
  .page { …

我想用一个div具有background-color,但如果我打印页面会出现在白色.

当我使用<tr bgcolor="#333333">它创建表时也不起作用.

如何使用css和创建打印页面html？

我的代码:

<table border="0px" cellspacing="1" cellpadding="0" bgcolor="#777777" width="650px">
   <tr bgcolor="#999999">
       <td align=right colspan=2><span style="font:bold 14px 'b nazanin';">Text</span></td>
   </tr>
</table>

我正在实现最初在Internet Explorer中显示的网页的打印.

我想在打印模式下使用浏览器"Inspect Element"功能.所以我想模仿打印媒体,同时仍然在浏览器中显示页面.

谷歌浏览器具有这一功能.

这是否在Internet Explorer中可用.特别是IE11？

是否有WPF的打印对话框,在WPF中打印预览对话框,如Google Chrome或Word？

此时我使用Windows窗体中的打印预览对话框.我也尝试使用它的WPF版本.但WPF没有PrintPreviewDialog或PrintPrewiewControl.这是我的代码:

//To the top of my class file:
using Forms = System.Windows.Forms;

//in a methode on the same class:
PageSettings setting = new PageSettings();
setting.Landscape = true;

_document = new PrintDocument();
_document.PrintPage += _document_PrintPage;
_document.DefaultPageSettings = setting ;

Forms.PrintPreviewDialog printDlg = new Forms.PrintPreviewDialog();
printDlg.Document = _document;
printDlg.Height = 500;
printDlg.Width = 200;

try
{
    if (printDlg.ShowDialog() == Forms.DialogResult.OK)
    {
        _document.Print();
    }
}
catch (InvalidPrinterException)
{
    MessageBox.Show("No printers found.", "Error", MessageBoxButton.OK, MessageBoxImage.Error);
}

我也搜索了一个NuGet包,但没有发现真的很好.

我已经展示了一些显示问题的截图...

问题:

我正在尝试使用只有表格打印此页面,如图所示,打开侧窗格我已将该侧窗格放入print-hidden并且它正在工作直到版本Google Chrome 46.0.2490.71但在css的下一次更新后无法正常工作.@media printmargin

目前我的谷歌Chrome版本是 48.0.2564.23

Sidepane页面:

新版本的chrome显示边距,如打印预览图像所示,此问题仅在Chrome浏览器中出现,它在所有其他浏览器中正常工作

Sidepane Page Print Priview:

没有Sidepane页面:

没有Sidepane页面打印Priview:

我不明白为什么新版本的chrome会占用print-hiddendiv的余量...... !!

重要的是它没有在chrome最新更新中工作,否则它很好.

如果有人在最​​新的chrome更新中发现了打印问题,请告诉我任何人都有解决方案.

您可以询问是否有任何问题需要了解我的问题.

谢谢...

尝试:

我试图给出负左边距但在这种情况下所有其他浏览器的打印预览都不合适

问题在GitHub上:

GitHub问题

Google Chrome论坛上的问题:

铬论坛问题

的jsfiddle:

小提琴

在JsFiddle我已经使用了css属性,margin-left但它在Chrome最新版本中没有工作47它在旧版本中运行良好,Google Chrome 46.0.2490.71但在下一次更新中它是其他浏览器中的大问题它正常工作非常顺利...

我有一个绘图功能,只需要一个HDC.但是我需要展示一个精确版本的打印版本.

所以目前,我使用带有打印机HDC的CreateCompatibleDC()和带有打印机HDC的CreateCompatibleBitmap().

我这样想DC会有打印机的确切宽度和高度.当我在这个HDC中选择字体时,文本将与打印机完全一样.

不幸的是,我不能让StretchBlt()将这个HDC的像素复制到控件的HDC,因为我猜它们是不同的HDC类型.

如果我从具有与打印机页面相同的w,h的HDC窗口创建"内存画布",那么这些字体会因为缩放屏幕而不是页面而显示出来.

我应该从窗口的DC和CreateCompatibleBitmap()从打印机的DC或其他东西创建CompatibleDC()吗？

如果有人可以解释这样做的正确方法.(并且仍然有像打印机那样看起来很完美的东西)......

好吧,我很感激!!

...史蒂夫

我正在尝试执行一些样式来处理打印时的分页符，以确保我的内容不会被切成两半。

我知道执行此操作所需的样式（page-break-inside等等），但尝试验证它们是否有效是一项相当费力的任务，特别是当我在向我显示预览时无法查询 DOM 时。

在 Chrome（或任何其他浏览器）中，是否可以将页面置于打印模式并让它在分页符所在的位置呈现？

目前，我可以使用开发工具来启用打印媒体查询，但查看分页符发生位置的唯一方法是实际调出打印预览。然而，当这一切完成后，我无法与 DOM 交互来了解为什么元素会或不会因中断而被切成两半。

当一切正常时，这并不是真正的问题，但众所周知，事情往往会表现得很奇怪！

谢谢

我通过发送ZPL II命令使用Java打印带有Zebra打印机的标签.我想在将标签发送到打印机之前显示标签的预览.

我想使用内置字体,而不是尝试将字体发送到打印机.

我可以在编程指南第2卷的第60页看到字体列表.其中有15个,每个都标有一个字母,没有引用等效屏幕字体的名称.

我可以生成一个图像来显示条形码,但是我无法弄清楚如何正确显示文本,因为在OCR字体之外,我不知道在屏幕上利用的等效字体.

我没有在Zebra的网站上找到任何列出它们的文档,我的搜索只返回了如何将屏幕字体发送到打印机的结果(这看起来很复杂,我现在想要避免).

有谁知道我可以在哪里获得字体,或者你能为我提供一个(希望是免费的)等价物列表吗？

我拍了一下手册中显示的字体的截图,以供参考.

我试图以我希望它在CSS中使用@page指令的方式为我打印打印预览.出于某种原因,无论我的页边距设置为什么,内容都会被压扁,即使数字被认为是精确的.这是一个测试的例子:

https://deck.zone/embed/-KK43Q9JoAqMIYd5gLj5;scriptId=0;print;tabs=result,code

如果你打开这个页面上的打印预览(我正在测试chrome),你会发现这些卡非常偏离中心.不过这是件事 - 我的卡片设置为2.5in乘3.5in,页面本身设置为8.5in乘11in.这意味着我应该在左右之间有大约1英寸的边距,在顶部和底部有0.5英寸的边距,这意味着我的边距应该在每一边减半.但是,如果我真的这样做,它看起来很乱:

这是我的@page CSS:

  @media print {
    html, body, .printable, .results-pane, .embed-view {
      width: 8.5in !important;
      height: 11in !important;
    }

    @page {
      size: 8.5in 11in;
      margin-top: 0.25in;
      margin-left: 0.5in;
      margin-right: 0.5in;
      margin-bottom: 0.25in;
    }
  }

即使我尝试手动设置边距,问题仍然存在,通过这种方式,您甚至可以看到我的内容被压扁.这是它的外观绝对没有边距(留下1英寸和0.5英寸的边距:

以下是我自己设置边距时的样子:

有没有办法可以阻止浏览器执行这种压扁行为,或使用我的@print查询来解决这个问题？作为参考,我已尝试在主体上设置边距,但顶部/底部边距不会在多个打印页面上保留.