相关疑难解决方法(0)
如何在A4纸张尺寸页面制作HTML页面？
是否可以使HTML页面表现得像,例如,像MS Word中的A4大小的页面？
基本上,我希望能够在浏览器中显示HTML页面,并在A4尺寸页面的尺寸中概述内容.
为了简单起见,我假设HTML页面只包含文本(没有图像等),<br>例如没有标签.
此外,当打印HTML页面时,它将显示为A4大小的纸页.
推荐指数
解决办法
查看次数
使用CSS媒体查询检测打印的页面大小
我的应用程序通过创建一个不可见的iframe然后打印它来生成打印的报告.我正在尝试解决的一系列令人沮丧的问题中的最新信息是针对不同的打印页面大小优化CSS.IE9 似乎有点工作(但有其他问题,比如忽略@page {margin:...}),但在FF或Chrome上根本没有运气.
我的代码看起来像这样:
@media print and (width: 210mm) and (height: 297mm) {
... stuff for A4 size ...
}
@media print and (width: 8.5in) and (height: 11in) {
... stuff for US letter size ...
}
在Chrome或FF中,这些规则都没有匹配.我也尝试了设备宽度和设备高度,这些也没有用(它们似乎报告了打印机的绝对最大尺寸,而不是页面尺寸).我无法弄清楚"宽度"和"高度"返回的值是什么,有没有办法告诉我？
是否有可靠的方法使用媒体查询检测打印页面大小？我非常接近得出的结论是,没有办法在浏览器中以任何一致的方式控制打印,并且放弃了这一点.
推荐指数
解决办法
查看次数
将模态内容打印为完整的A4页面
我正在尝试两件事:
- 在模式上显示内容,就像在A4页面上显示的内容一样
- windows.print()通过主流浏览器在A4页面上的模态
以下是我的CSS:
.page {
width: 210mm;
min-height: 297mm;
padding: 20mm;
margin: 10mm 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 black solid;
height: 257mm;
outline: 2cm #FFEAEA solid;
}
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
margin:0 !important;
padding:0 !important;
height:100% !important;
visibility: hidden;
}
.page .subpage .col-md-12,.col-lg-12{
float:left;
width:100%;
}
.page .subpage {
padding: 1cm; …推荐指数
解决办法
查看次数
如何通过CSS设置Safari打印边距以打印无边框
我想在Safari中打印一个没有任何边距的PDF页面.在打印对话框中,页面大小设置为"A4无边框".
无论我做什么,OSX上的Safari都在我的HTML周围增加了额外的余量.检查'打印背景',看看我的意思.
很明显,@ page-rule对Safari没有任何影响,但还有其他方法吗？
http://jsfiddle.net/willemvb/psFHC/
@page {
size: 21cm 29.7cm; /*A4*/
margin: 0; /*webkit says no*/
}
html{
margin: 0;
padding: 0;
width: 100%;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
width: 100%;
background: #eee;
}
推荐指数
解决办法
查看次数
如何在 Angular 9 中拆分 A4 大小的 HTML 页面
我正在尝试创建类似于 Xing the CV maker -> https://lebenslauf.com/ 的内容。
我确实有不同的对象数组。但我无法创建将呈现数据的 A4 页面，如果数组大于一页，则创建新页面 A4 并在那里添加数据。如果数组对于一个大小更大，则该函数需要如此，然后创建一个新页面 a4 并将数据放在那里。在 stackblitz 中，我添加了一个数组和一些随机文本并设计了一个 A4 字母。我提到了这个问题和答案，但并没有给我太多帮助。
CSS 设置 A4 纸张大小。
我试图伪造分页并创建 A4 尺寸，但没有奏效。
我在那里用 jquery 查看了这段代码。它有效，但我无法在 Angular 中编译它。
https://jsfiddle.net/tm637ysp/10/
有人可以帮我吗？
我在 stackblitz 中创建了两个项目。也许他们会帮忙。
https://stackblitz.com/edit/angular-ivy-fjhpdu。
https://stackblitz.com/edit/angular-ivy-uzmdwg
我想重新打开这个问题，因为@HirenParekh 批准的答案并没有像我想要的那样工作。现在的问题是，如果一个对象中的文本非常大，它不会实时添加新页面，但前提是我重新加载页面。我认为代码将用于添加新页面或编辑页面将仅在ngOnInit. 为完成这项工作而提供的指令，我认为它不能正常工作。这是 stackblitz他试图帮助我的东西。
https://stackblitz.com/edit/angular-ivy-zjf8rv
这是我试图显示数据的代码。
<div style="transition: transform 0.25s ease 0s;transform: scale(1.3);transform-origin: 50% 0px 0px;backface-visibility: hidden;perspective: 1000px;display: block;margin: 0px 11.5385%;font-size:10px;width: 76.9231%;-webkit-font-smoothing: antialiased;">
<app-paginated-view [pageSize]="'A4'" *ngIf="model" class="Grid-grid-column">
<div pageContent class="row">
<div class="col col-lg-7">
<h4>{{currentUser?.firstName}} {{currentUser?.lastName}}</h4>
</div> …推荐指数
解决办法
查看次数
Css在Chrome中模拟缩放
Chrome中有一个我想模拟的打印设置(缩放).
在IE11中,我已经添加了css,这似乎解决了它,但不是在Chrome中.
@page {
size: A4 portrait;
margin: 1mm 1mm 0 5mm;
}
在Chrome中,我必须手动将比例更改为50才能修复它.我试过用css
zoom: 50%
transform: scale(0.5);
更新 现在我知道它为什么在IE11中工作.与设置A4尺寸无关.看起来IE有一个'Shrink to Fit'设置默认打开.我不认为在CSS中有办法.
推荐指数
解决办法
查看次数
关于分页符，如何让 Puppeteer PDF 生成与 HTML 文档完全匹配？
我正在使用 Puppeteer 生成 PDF 文件，使用静态 HTML 作为源：
const page = await browser.newPage();
await page.setContent(html); //html is read in from the file system
const pdf = await page.pdf({
format: 'A4',
printBackground: true,
preferCSSPageSize: true
});
同样的 HTML 也会显示给我的应用程序的前端用户，因此他们可以在下载 PDF 之前准确预览内容。
为了匹配一张 A4 纸的大小，我使用 CSS<body>将 HTML的标签设置为特定的宽度和高度，在此过程中考虑页边距。
例如，我的 CSS 可能如下所示：
@page {
margin: 1cm; //tells Puppeteer to print the PDF with a 1cm margin
}
body {
width: 19cm; // (21cm width minus 1cm margin on each side)
height: 27.7cm // …推荐指数
解决办法
查看次数
如何在Chrome中打印时更改纸张尺寸
抱歉这是一个太简单的问题,但很长一段时间我找不到答案.我使用此jQuery代码将Chrome中的iFrame保存为pdf:
$("#ifr").get(0).contentWindow.print();
一切都很好,但Chrome总是采用Letter格式输出.我需要增加纸张尺寸或定义自定义纸张尺寸.
有许多参考资料表明Chrome应该从 Win 7中的默认打印机中获取纸张大小.但更改默认打印机打印选项(纸张大小,布局等)不会影响Chrome打印 - 无论默认情况如何,它都会采用Letter格式打印机设置.
Chrome从哪里获取打印页面大小设置？我该怎么改变它？
谢谢
推荐指数
解决办法
查看次数
Javascript A4纸张大小
我正在使用CkEditor，因此我为textarea设置了4尺寸。
CKEDITOR.editorConfig = function( config ) {
config.height = '842px';
config.width = '595px';
};
HTML：
<textarea name="Editor" class="ckeditor" id="aboutme"></textarea>
Javascript：
var editor = CKEDITOR.instances.aboutme;
var edata = editor.getData();
var replaced_text = edata.replace(/(\[##.+?##\])/g, '<span style="background-color:yellow"><strong>$1</strong></span>');
editor.setData(replaced_text);
我的问题：
如果textarea有2张a4纸，我想在textarea中的第一张和第二张a4纸之间添加红色下划线。
我试图替换以执行此操作，但是我对javascript中ckeditor的a4纸不了解。
我想在842px（a4纸张大小）后加上红色下划线
如何在javascript中842px之后加上红色下划线？
任何帮助将不胜感激。
谢谢。
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
如何打印完全填满 A4 或其他格式的图像？
如果我使用 Chrome 或 Firefox 打印图像，我会遇到一些问题。我还没有找到如何摆脱肖像或风景中的白色边框。遗憾的是，这个stackoverflow 解决方案似乎对我不起作用。
目前我使用这个代码：
echo "<body onload=\"window.print()\" onfocus=\"window.close()\">";
echo "<style type=\"text/css\" media=\"print\">";
echo "@page { size: auto; }";
echo "</style>";
echo "<img src=\"". $dirname . '/' . $photo ."\">";
我得到的结果与将它从 windows 文件夹拖放到 Internet 导航器中的结果相同，如下例所示：
铬设置为： - 风景 - 颜色 - A4 - Marges none
推荐指数
解决办法
查看次数