python-pdfkit (wkhtmltopdf) переполнение оглавления
В настоящее время я создаю очень хороший PDF. в этом нет ничего технически неправильного. Тем не менее, оглавление ужасно.
TOC генерируется с помощью xsl, который передается через jinja2 для простых деталей в верхнюю часть страницы. Я изменил XSL, чтобы точно соответствовать брендингу и дизайну клиента. Тем не менее, список продолжает расти в высоту.
Вот текущий результат (извините за размытие текста), вы можете увидеть, что ток поднимается в нужном месте на новой странице, но, похоже, нет способа применить верхнее поле к новой странице: 
Код: вот это xsl:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:outline="http://wkhtmltopdf.org/outline"
xmlns="http://www.w3.org/1999/xhtml">
<xsl:output doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
indent="yes" />
<xsl:template match="outline:outline">
<html>
<head>
<title>Table of Contents</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{
background-color: #fff;
margin-left: 0px;
margin-top: 0px;
color:#1e1e1e;
font-family: arial, verdana,sans-serif;
font-size: 90px;
}
.contentSection{
position:relative;
height:3200px;
width:6100px;
}
.profile{
position:absolute;
display:inline-block;
top:200px !important;
}
h1 {
text-align: left;
font-size: 70px;
font-family: arial;
color: #ef882d;
}
li {
border-bottom: 1px dashed rgb(45,117,183);
}
span {float: right;}
li {
list-style: none;
margin-top:30px;
}
ul {
font-size: 70px;
font-family: arial;
color:#2d75b7;
}
ul ul {font-size: 80%; padding-top:0px;}
ul {padding-left: 0em; padding-top:0px;}
ul ul {padding-left: 1em; padding-top:0px;}
a {text-decoration:none; color: color:#2d75b7;}
#topper{
width:100%;
border-bottom:8px solid #ef882d;
}
#title{
position:absolute;
top:60px;
font-size:60px;
left:150px;
color:#666666;
}
h1, h2{
font-size:60px;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
#profile{
position:static;
-webkit-border-top-left-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-bottomleft: 40px;
border-top-left-radius: 40px;
border-bottom-left-radius: 40px;
right:-540px;
background-color: #2d75b7;
padding:4px;
padding-left:60px;
padding-right:250px;
color:#fff;
display:inline-block;
margin-top:200px;
float:right;
}
#room{
padding-top: 200px;
padding-left: 150px;
display:inline-block;
}
#section{
padding-left: 150px;
color: #ef882d;
text-transform: uppercase;
font-size:60px;
font-weight: bold;
display:inline-block;
margin-top: 30px;
margin-bottom: 5px;
}
#area{
padding-left: 150px;
font-size:60px;
color:#2d75b7;
margin-top: 15px;
}
#dims{
padding-left: 150px;
font-size:60px;
color:#2d75b7;
margin-top: 15px;
}
#toc{
width:50%;
margin-top:150px;
margin-left:300px;
}
</style>
<script>
var value = {{profile|e}};
</script>
</head>
<body>
<div class="contentSection">
<div id="title">A title here</div>
<div id="topper">
<div id="profile" class="profile">{{profile|e}}</div>
<div id="room"> {{profile|e}} </div>
<div id="area"> Revision Date </div>
<div id="dims"> {{area|e}} </div>
<div id="section">Table of Contents</div>
</div>
<div id="toc">
<ul><xsl:apply-templates select="outline:item/outline:item"/></ul>
</div>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="outline:item">
<! begin LI>
<li>
<xsl:if test="@title!=''">
<div>
<a>
<xsl:if test="@link">
<xsl:attribute name="href"><xsl:value-of select="@link"/> .
</xsl:attribute>
</xsl:if>
<xsl:if test="@backLink">
<xsl:attribute name="name"><xsl:value-of select="@backLink"/> . </xsl:attribute>
</xsl:if>
<xsl:value-of select="@title" />
</a>
<span>
<xsl:value-of select="@page" />
</span>
</div>
</xsl:if>
<ul>
<xsl:comment>added to prevent self-closing tags in QtXmlPatterns</xsl:comment>
<xsl:apply-templates select="outline:item"/>
</ul>
</li>
</xsl:template>
</xsl:stylesheet>
Я имел дело с переполнением содержимого в других областях PDF, используя традиционный HTML, JavaScript и флаг готовности документа. Однако для оглавления требуется файл XSL.
Я пытался сделать это с nth-child, css nth-child игнорируется.
Вопрос:
* Есть ли способ в wkhtmltopdf или python pdf-kit для работы с разрывами страниц в оглавлении, в частности, и для размещения лучшего поля сверху на новой странице? Есть ли способ предоставить оглавление в виде традиционной HTML-страницы, чтобы я мог сделать это с помощью javaScript вместо этого? *
0 ответов
Обзор кода
Я сделал быстрый обзор кода в вашем XSL (и CSS) файле. Даже если это не решит вашу проблему, это поможет воспроизвести и понять ее. Вот мои комментарии:
Ваш XSL имеет опечатку:
<! begin LI>не является допустимой вкладкой XML. Это комментарий?Я предпочитаю использовать
concat()Функция XPath для непосредственного добавления символов. Потому что, если вы заново сделаете отступ в своем коде, вы можете ввести дополнительные пробелы.Итак, я заменил:
<xsl:attribute name="href"><xsl:value-of select="@link"/> . </xsl:attribute>От:
<xsl:attribute name="href"> <xsl:value-of select="concat(@link, ' . ')"/> </xsl:attribute>Я добавил
xs:ifпредотвратить генерацию пустого<ul>если это не нужно:<xsl:if test="count(outline:item)"> <ul> <xsl:comment>added to prevent self-closing tags in QtXmlPatterns</xsl:comment> <xsl:apply-templates select="outline:item"/> </ul> </xsl:if>Я также исправил дублирующиеся или неправильно сформированные записи CSS и заменил:
li { border-bottom: 1px dashed rgb(45, 117, 183); } span { float: right; } li { list-style: none; margin-top: 30px; } ul ul {font-size: 80%; padding-top:0px;} ul {padding-left: 0em; padding-top:0px;} ul ul {padding-left: 1em; padding-top:0px;} a {text-decoration:none; color: color:#2d75b7;}от:
span { float: right; } li { list-style: none; margin-top: 30px; border-bottom: 1px dashed rgb(45, 117, 183); } ul { font-size: 70px; font-family: arial; color: #2d75b7; } ul ul { font-size: 80%; padding-left: 1em; padding-top: 0px; } a { text-decoration: none; color: #2d75b7; }Если вы нацелены на XHTML,
<style>тег имеет обязательныйtypeприписывать. Это же замечание для<script>приписывать.<style type="text/css">...</style> <script type="text/javascript">...</script>
Воспроизведение проблемы
Было немного сложно воспроизвести вашу ошибку из-за недостатка информации. Так что я думаю.
Сначала я создаю пример файла TOC, который выглядит следующим образом:
outline.xml
<?xml version="1.0" encoding="UTF-8"?>
<outline xmlns="http://wkhtmltopdf.org/outline">
<item>
<item title="Lorem ipsum dolor sit amet, consectetur adipiscing elit." page="2"/>
<item title="Cras at odio ultrices, elementum leo at, facilisis nibh." page="8"/>
<item title="Vestibulum sed libero bibendum, varius massa vitae, dictum arcu." page="19"/>
...
<item title="Sed semper augue quis enim varius viverra." page="467"/>
</item>
</outline>
Этот файл содержит 70 элементов, поэтому я могу видеть разрывы страниц.
Для сборки HTML и PDF я использовал ваш (исправленный) XSL-файл и запустил pdfkit:
import io
import os
import pdfkit
from lxml import etree
HERE = os.path.dirname(__file__)
def layout(src_path, dst_path):
# load the XSL
xsl_path = os.path.join(HERE, "layout.xsl")
xsl_tree = etree.parse(xsl_path)
# load the XML source
src_tree = etree.parse(src_path)
# transform
transformer = etree.XSLT(xsl_tree)
dst_tree = transformer.apply(src_tree)
# write the result
with io.open(dst_path, mode="wb") as f:
f.write(etree.tostring(dst_tree, encoding="utf-8", method="html"))
if __name__ == '__main__':
layout(os.path.join(HERE, "outline.xml"), os.path.join(HERE, "outline.html"))
pdfkit.from_file(os.path.join(HERE, "outline.html"),
os.path.join(HERE, "outline.pdf"),
options={'page-size': 'A1', 'orientation': 'landscape'})
обратите внимание: размер вашей страницы выглядит очень огромным...
Решение
Вы правы, wkhtmltopdf не учитывает поля в вашем CSS:
li {
list-style: none;
border-bottom: 1px dashed rgb(45, 117, 183);
margin-top: 30px; # <-- not working after page break
}
Это нормальное поведение, рассмотрим, например, заголовки абзацев (h1, h2, так далее.). Заголовок может иметь верхнее поле, чтобы добавить пробел между абзацем и следующим заголовком, но, если заголовок начинает новую страницу, мы хотим избавиться от поля и иметь заголовок, касающийся верхнего поля страницы.,
Для вашего оглавления есть решение. Ты можешь использовать padding (вместо margin):
li {
border-bottom: 1px dashed rgb(45, 117, 183);
list-style: none;
padding-top: 30px;
}
Собственно содержание ТОС (#toc элемент) фиксируется:
#toc {
width: 50%;
margin-top: 150px;
margin-left: 300px;
}
Таким образом, вы можете уменьшить margin-top чтобы соответствовать вашим потребностям, например:
#toc {
width: 50%;
margin-top: 120px;
margin-left: 300px;
}