相关疑难解决方法(0)

根据内容溢出动态插入分页符

我有一个通过许多Vue组件生成的大型网页.渲染的HTML结构有点类似于:

<header></header>
<element1></element1>
<element2></element2>
<element3></element3>
<table></table>
<element4></element4>
<footer></footer>

Run Code Online (Sandbox Code Playgroud)

我想在A5页面上很好地打印这个页面header并footer在每个打印页面上重复.我用2种方法试过这个:

将HTML结构转换为页面容器并基于总计分割元素clientHeight.就像是

<section class="page">
    <header></header>
    <element1></element1>
    <element2></element2>
    <element3></element3>
    <footer></footer>
</section>
<section class="page">
    <header></header>
    <table></table>
    <element4></element4>
    <footer></footer>
</section>

Run Code Online (Sandbox Code Playgroud)

或者,将CSS分页符属性添加到header内容溢出位置并动态插入.例如

<header></header>
<element1></element1>
<element2></element2>
<element3></element3>
<footer></footer>
<header style="page-break-before: always"></header>
<table></table>
<element4></element4>
<footer></footer>

Run Code Online (Sandbox Code Playgroud)

DOM遍历找到溢出点的样子

var availHeight = 20;    // Height of A5 page - tolerance
var body = document.querySelector('body');
var initialWidth = body.style.width;
body.style.width = '14.85cm';

if (body.clientHeight > availHeight) {    // if content exceeds page height
    var …

Run Code Online (Sandbox Code Playgroud)

html javascript css vue.js

Shr*_*han

2018 03-16

11
推荐指数

1
解决办法

475
查看次数

如何在保留纵横比的同时调整HTML生成的word文档中的图像大小？

我根据这些出色的stackoverflow资源从一些HTML构建了一个word文档:

对于那些即将尝试它的人来说,为自己做一些痛苦做好准备,因为Word至少可以解释它与CSS一起使用的内容.如果你想要列,你真的需要回到使用表格来解决问题.

我一直无法正确调整图像大小 - 用户上传的图像将在此Word文档中使用,我想根据'height'属性调整大小 - 高度为50px然后相应地缩放宽度.

似乎没有关于如何在网络上的任何地方执行此操作的文档.

我还使用了一些html2canvas代码将漂亮的(基于CSS的)条形图转换为图像,然后根据优秀的http://www.kubilayerdogan.net/?p直接在word文档中使用= 304.

这个图像打印效果不好,所以我打算在运行html2canvas代码之前在屏幕上(隐藏在内存中)(使用jQuery)使源HTML更大 - 这样我就可以拥有更大的图像,我可以然后缩小尺寸并获得更高的DPI数.

首先,我了解到CSS宽度和高度对Word中的图像没有影响.同样,以下内容不起作用.

<img class="cobrandedlogo" src="' . $logourl . '" height="50px" />';

Run Code Online (Sandbox Code Playgroud)

但我已经发现,使用"点"的工作原理是这样:

<img class="cobrandedlogo" src="' . $logourl . '" height="50" />';

Run Code Online (Sandbox Code Playgroud)

但是这会产生非常拉伸的图像(当然取决于源材料).我希望它根据原始图像进行缩放.

我正在使用PHP.

我发现这篇SO文章似乎有所帮助:计算图像大小比例以调整大小

这是我一直在使用的一些代码:

jQuery代码生成div的图像,稍微修改显示的HTML并将其提交到PHP文件:

var wordreport = jQuery('#container').clone();
jQuery(wordreport).find('#stats').html('<img src="http://improvedemployees.com/assets/teamstats/' + jQuery('#imgname').val() + '" />');
jQuery(wordreport).find('.columncontainer').each(function() {
    jQuery(this).children().wrapAll('<table><tr>');
});
// these were 3 columns on the screen - converted to a table and …

Run Code Online (Sandbox Code Playgroud)

html css php ms-word

Dav*_*tch

2017 05-23

9
推荐指数

1
解决办法

4879
查看次数

Wicked_pdf避免分页内部无法正常工作

这是我使用Wicked_pdf将我的html.erb页面转换为的结果pdf.

问题:看起来table的tr已分裂成两页.

我没有成功的尝试:

使用page-break-inside所描述的在这里或在这里

table,tr,td,th,tbody,thead,tfoot {page-break-inside:avoid!important; }

把一个div中的文本,如解释在这里
这里

另一种选择:将每个tr放在自己的tbody中,然后将peage break css规则应用于tbody.表支持多个tbodys.一点额外的标记,但对我来说效果不错.

我正在使用Ruby on Rails 4.2.6,Wicked_pdf最新版本,bootstrap.

关于github上的相关问题

问:我怎样才能让table的tr不分割成两页.

page-break wkhtmltopdf page-break-inside wicked-pdf

Nha*_*inh

2017 05-23

9
推荐指数

1
解决办法

5238
查看次数

如何指定在分页后重新出现的元素？

背景:我有一个PHP脚本,它生成一个长的HTML/CSS文档,可以使用WkHtmlToPdf转换为PDF.

在文档中的某一点,我们进入一个动态区域,其中包含可变数量的条目,其中一些条目包括大图像.我想在每个页面上重绘一个标题.

澄清点:这是网页一部分的打印视图中的重复标题,而不仅仅是整个页面的标题.

我想这样做是通过CSS.例如(伪代码):

    #some_region:pagebreak {
      background-color: #fcc;
      border-color: #000;
      border-style: solid;
      border-width: 0 0 1px 0;
      content: "Our Header Here";
    }

Run Code Online (Sandbox Code Playgroud)

当然,这个虚构的CSS3选择器不存在!

是否有任何聪明的CSS黑客可用于在某个容器内的任何分页符后显示元素？

举例说明:https://scott.arciszewski.me/public/23277702.php

css html5 css3

Sco*_*ski

2014 04-25

8
推荐指数

1
解决办法

1077
查看次数

CSS 打印，标题仅在第一页宽度 css 上

我在 Logo 标签中有一个徽标。对于打印样式，我做了一个 @print 媒体查询 css。如果我将其打印出来，徽标将印在每一页上 - 但它应该只显示在第一页上。

试过：

header { display:none; }
@page:first { 
  header { display:block; } 
}

Run Code Online (Sandbox Code Playgroud)

但因此标题将在每个页面上删除！任何提示？谢谢

html css media-queries

Sti*_*gen

lucky-day

8
推荐指数

1
解决办法

7111
查看次数

HTML打印html文档时所有页面中的页眉和页脚

我创建了一个带有标题,一些内容和页脚的html页面.我试图获得HTML页面的打印,有2页.我在第一页获得了标题,在最后一页获得了页脚.

我真正需要的是在所有页面中显示的页眉和页脚,就像在word文档中一样.

我检查并发现使用thead和tfoot的表格格式,可以完成.它在firefox和IE中运行,但它不适用于chrome.这是一些webkit浏览器兼容性问题吗？

有没有其他方式兼容所有浏览器.

html css html5 css3

Ben*_*Sam

2013 09-23

7
推荐指数

1
解决办法

3万
查看次数

我正在处理发票打印脚本.发票号码必须打印在所有打印页面的顶部.我用php来实现这个目的.但这里我只是复制html版本.这个脚本在FF和IE中工作正常,但不能在chrome中工作.在FF中,我可以看到发票编号出现在打印视图中所有页面的标题部分中.我删除了所有不必要的代码以获得清晰的代码.我需要在每个打印页面中看到"发票编号:A23000BN".有没有办法在Chrome浏览器中实现相同的目标？我的html脚本如下:

<html>
<head>
<style>
#header {
    text-align: right;
    height: 20px;
    position: fixed;
    margin: 0px;
    bottom: 0px;
}
</style>
</head>
<body>
<table width="100%">
   <tr>
      <td height="1200"></td>
   </tr>
</table>
<div class="header"> Invoice Number : A23000BN </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

html javascript css jquery

San*_*non

2015 12-31

7
推荐指数

1
解决办法

1270
查看次数

在R Markdown中,无论输出类型如何,都在每个页面上创建页眉/页脚(pdf,html,docx)

我想使用R markdown添加为每个页面创建一个页脚(包括第一个!)的问题.编织到pdf时,那里的代码(也在下面)对我来说非常好.但我不会得到html或docx输出的页眉/页脚.

在R Markdown中,无论输出文档的类型如何,我还能为输出文档的每个页面生成页眉/页脚？

---
title: "Test"
author: "Author Name"
header-includes:
- \usepackage{fancyhdr}
- \usepackage{lipsum}
- \pagestyle{fancy}
- \fancyhead[CO,CE]{This is fancy header}
- \fancyfoot[CO,CE]{And this is a fancy footer}
- \fancyfoot[LE,RO]{\thepage}
output: pdf_document
---
\lipsum[1-30]

Run Code Online (Sandbox Code Playgroud)

latex yaml r pandoc r-markdown

low*_*rul

lucky-day

7
推荐指数

1
解决办法

5479
查看次数

如何在打印预览中将元素对齐到页面底部

我正在尝试使用css对齐我的html页面的元素.

我已将元素对齐到页面底部,但是当我在打印预览中看到页面时.元素没有出现在底部

我正在使用此css将元素对齐到底部

码:

.bel {
    position:relative;
    margin-left: 38%;
    margin-right: 38%;
    bottom:-25pc;
}

Run Code Online (Sandbox Code Playgroud)

HTML代码:

<span class="bel">Text 1</span>

Run Code Online (Sandbox Code Playgroud)

但这不起作用......我怎么能解决这个问题呢？

html css

Min*_*ntY

lucky-day

6
推荐指数

3
解决办法

1万
查看次数

在每张打印纸上重复内容

我在网页中有这样的结构，假设表格很长。

\n\n

<header>\n   <h1><img src="//some_logo.jpg"/> 2016 Report</h1>\n</header>\n<section>\n   <table style="width:100%">\n     <tr>\n       <th>Firstname</th>\n       <th>Lastname</th> \n       <th>Age</th>\n     </tr>\n     <tr>\n       <td>Jill</td>\n       <td>Smith</td> \n       <td>50</td>\n     </tr>\n     <tr>\n       <td>Eve</td>\n       <td>Jackson</td> \n       <td>94</td>\n     </tr>\n   </table>\n</section>\n<footer>\n   <h3><img src="//some_image.jpg"/> 2016 \xc2\xa9 The report company</h3>\n</footer>\n

Run Code Online (Sandbox Code Playgroud)\n\n

我需要的是打印这张长表格，但在每一页中重复我的页眉和页脚。

\n\n

像这样

\n\n