我正在开发一个网站,需要处理打印视图.通常,当我遇到布局问题时,我会使用Chrome的Element Inspector.但是,这在打印预览模式下不存在.
是否有Chrome插件或其他方式来更改Chrome本身的查看媒体,以打印机的形式查看页面?我认为它没有特定于Chrome的解决方案,但这是我的主要浏览器,所以拥有一个浏览器内的解决方案会很不错.
现在我只专注于打印预览媒体,但是能够更改为任何支持的媒体类型(即所有/盲文/浮雕/手持/打印/投影/屏幕/语音/ tty /)是理想的电视).
google-chrome print-preview web-inspector google-chrome-devtools
这是我现在的过程:
这是第3步让我烦恼,我想知道是否有可能用插件或其他东西将其删除.只需选择将页面视为打印介质,然后只需刷新即可查看更改.
你如何测试你的打印样式表?刷新后是否总是单击打印预览?
我一直使用Firebug和IE Developer Toolbar来调试棘手的CSS问题.但偶尔会出现一个棘手的错误,只有在你打印页面时才出现.
您使用哪些技术/工具来诊断此类问题?有没有办法在打印视图中更多地使用传统的CSS调试工具?
更新:我已经使用PDF打印机以避免浪费纸张; 我的问题是我无法右键单击打印的DOM.下面的一些其他答案非常有用,谢谢.:-)
是否可以打印带有真正绝对定位元素的HTML页面?似乎所有浏览器都在这里搞得一团糟.很容易通过绝对单位(例如,cm)定义一个主体,并position: absolute在内部放置元素.但是,每个浏览器似乎都试图打印这样的页面.FF例如是添加打印页边距,即使在linux上打印到PDF时,尽管有0页边距页面设置.在每种情况下,Chrome似乎都会缩小页面.那么如何打印具有绝对定位的东西,例如.纸张形式字段,标记等?我忽略了什么吗?
我使用(照例)@media print规则来指定网页的打印应该如何与在线版本不同.这很有效,但测试真的很难.我通常要做的是以下步骤:
screen和创建不同的样式print.我想做什么(但无法使用任何浏览器):
screen和创建不同的样式print.是否有任何浏览器或浏览器,插件和流程组合可以获得类似的结果?如果您有如何更改文件组织的想法,只需进行最少的更改即可获得所需结果,欢迎您.
这个问题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
我有一个很好的操作(加载所有图像和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)