相关疑难解决方法(0)

在打印预览模式下使用Chrome的Element Inspector?

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

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

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

google-chrome print-preview web-inspector google-chrome-devtools

640
推荐指数
10
解决办法
23万
查看次数

更快速地开发和测试打印样式表(每次都避免打印预览)?

这是我现在的过程:

  1. 保存对print.css的更改
  2. 打开浏览器并刷新页面.
  3. 右键单击并选择"打印">"打印预览"(Firefox,但确实是任何浏览器)

这是第3步让我烦恼,我想知道是否有可能用插件或其他东西将其删除.只需选择将页面视为打印介质,然后只需刷新即可查看更改.

你如何测试你的打印样式表?刷新后是否总是单击打印预览?

css firefox

175
推荐指数
6
解决办法
9万
查看次数

你如何调试可打印的CSS?

我一直使用Firebug和IE Developer Toolbar来调试棘手的CSS问题.但偶尔会出现一个棘手的错误,只有在你打印页面时才出现.

您使用哪些技术/工具来诊断此类问题?有没有办法在打印视图中更多地使用传统的CSS调试工具?

更新:我已经使用PDF打印机以避免浪费纸张; 我的问题是我无法右键单击打印的DOM.下面的一些其他答案非常有用,谢谢.:-)

css

70
推荐指数
5
解决办法
4万
查看次数

带绝对邮件的HTML打印

是否可以打印带有真正绝对定位元素的HTML页面?似乎所有浏览器都在这里搞得一团糟.很容易通过绝对单位(例如,cm)定义一个主体,并position: absolute在内部放置元素.但是,每个浏览器似乎都试图打印这样的页面.FF例如是添加打印页边距,即使在linux上打印到PDF时,尽管有0页边距页面设置.在每种情况下,Chrome似乎都会缩小页面.那么如何打印具有绝对定位的东西,例如.纸张形式字段,标记等?我忽略了什么吗?

html css printing

19
推荐指数
3
解决办法
3万
查看次数

如何使用在线工具测试浏览器的打印输出?

我使用(照例)@media print规则来指定网页的打印应该如何与在线版本不同.这很有效,但测试真的很难.我通常要做的是以下步骤:

  1. screen和创建不同的样式print.
  2. 在屏幕模式下启动页面
  3. 将页面打印到PDF打印机.
  4. 看看结果.
  5. 尝试找出行为错误的规则.

我想做什么(但无法使用任何浏览器):

  1. screen和创建不同的样式print.
  2. 在屏幕模式下启动页面
  3. 进入预览打印模式(例如Opera,Firefox可用)
  4. 使用Firebug(Firefox)或Dragonfly(Opera)等可用工具检查DOM和当前样式.
  5. 动态更改CSS,重新加载页面,再次查看结果和DOM.

是否有任何浏览器或浏览器,插件和流程组合可以获得类似的结果?如果您有如何更改文件组织的想法,只需进行最少的更改即可获得所需结果,欢迎您.

css browser web-inspector

17
推荐指数
2
解决办法
2万
查看次数

调整页面内容的大小以适合一个打印页面

这个问题IMO与CSS更相关,但我对任何解决方案都持开放态度.我正在尝试打印一个在px中定义高度的网页(我也试过%).现在在Safari和IE 8及以后版本中发生的事情,页面内容将无法在一页上打印.

当前设置

div.parent-container{  
    height: 900px;  
}  

div.parent-container div.child-containers{  
    height:100%;  
} 
Run Code Online (Sandbox Code Playgroud)

发生了什么

它将在FF中的一个页面上打印所有内容,但在IE中,Safari内容将分成两页,这对我的用户来说是一个问题.我必须告诉他们设置页边距:0.3这绝对不是一种有效的方法.

我做了什么

我已经尝试了不同的@page和浏览器特定的黑客来使其工作,但它并没有证明是富有成效的或者对我来说似乎没有效率(从未成为定制浏览器黑客的粉丝).

我想要的是

用于在一个页面上打印页面内容的CSS/JS解决方案可能类似于"Shrink to Fit".

谢谢,Rahi

javascript css web-applications

15
推荐指数
1
解决办法
4万
查看次数

Rotativa MVC无法在PDF上加载CSS或图像

我有一个很好的操作(加载所有图像和CSS)作为一个正常的操作,但是当我使用Rotativa.MVC.ViewAsPdf生成PDF时,它不会加载CSS.并且应用程序不显示任何错误

public ActionResult DownloadNonProfessionalDeputy(int id) 
  {
      Application_Attorney_NonProfessional oAP = db.Application_Attorney_NonProfessional.Find(id);
      return new Rotativa.MVC.ViewAsPdf(oAP) { FileName = string.Format("DCM_Attorney_Non_Professional_Application.pdf", new { CustomSwitches = "--print-media-type --header-center \"text\"" }) };// {   =  "--header-right \"Page [page] of [toPage]\""};

      //return View(oAP);
  }
Run Code Online (Sandbox Code Playgroud)

帮助赞赏

来自PDF的图片

在此输入图像描述

来自HTML视图的图像

在此输入图像描述

风景

@model DCM_Intranet.Models.Application_Attorney_NonProfessional
@{
    Layout = null;
    int nPage = 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="~/images/gale_phillipson_corn.ico" type="image/x-icon">
<title>Attorney Non-Professional Application</title>
<link href="~/css/style.default.css" rel="stylesheet"> …
Run Code Online (Sandbox Code Playgroud)

c# model-view-controller rotativa

6
推荐指数
1
解决办法
7279
查看次数