Python PDFkit缩小HTML并且无法正确显示数字

时间:2018-11-29 15:49:36

标签: html css python-3.x python-2.7 pdfkit

我有一个用Jinja2创建的本地html文件,试图将其导出为PDF。我的浏览器中的HTML看起来正确(屏幕截图为click here),但是,当使用pdfkit导出时,似乎整个文档都在缩小,文本混乱了(大多数是数字)。

我的pdf输出可以找到here.

我的python代码如下:

sizeof(sendBuf)/sizeof(sendBuf[0])

我的HTML和CSS文件如下(出于隐私目的更改了一些文本,而CSS中未显示import pdfkit import os import sys path_wkthmltopdf = r'C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe' config = pdfkit.configuration(wkhtmltopdf=path_wkthmltopdf) options = { 'dpi': 300, 'page-size': 'Letter', 'margin-top': '0.25in', 'margin-right': '0.25in', 'margin-bottom': '0.25in', 'margin-left': '0.25in', 'encoding': "UTF-8", 'custom-header' : [ ('Accept-Encoding', 'gzip') ], 'no-outline': None } pdfkit.from_file('brochure.html','brochure.pdf', configuration = config, options= options)

@fontface
@media print {
  -webkit-print-color-adjust: exact;
	@page
	{
		width: 8.5in;
	 	height: 11in;
	 margin: 0.25in;
 }
 body{
	 margin: 0.25in;
 }

}


body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
	margin:0;
	padding:0;
	border-width:0;
}
body {
	margin: 0.25in;
	width: 8.5in;
	height: 11in;

}
/* Begin Header */

header{
	width: 8in;
	height: 1in;
	background-image: url("../Pics/header-bg.JPG")!important;
	background-position: center;
	background-size: cover;
}

.wrapper{
	margin: 0.25in;
	position: relative;
	min-height: 100%;
}

#head_desc{
	width: 1.9in;
	height: 100%;
	display:inline-block;
  overflow: hidden;
}
#head_desc h2{
		padding: 8% 4% 0% 8%;
		margin-bottom: 1%;
		color:white;
		font-family:"Gotham Narrow Medium", sans-serif;
		text-transform: uppercase;
		font-size:19px;
		font-style:normal;
		font-weight:500;
		transform: scale(1, .9);
    -webkit-transform: scale(1, .9);
    -moz-transform: scale(1, .9);
    -ms-transform: scale(1, .9);
    -o-transform: scale(1, .9);
}

#head_desc p{
	padding: 0% 4% 0% 8%;
  margin-top: 0px;
	color: white;
	font-family: "Gotham Narrow Light", sans-serif;
	/* text-transform: uppercase; */
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	transform: scale(1, .9);
	-webkit-transform: scale(1, .9);
}
html {
    position: relative;
    min-height: 100%;
}
#head_address{
	display: inline-block;
	float:right;
	text-align: right;
	height: 100%;
	width: 50%;
	overflow: hidden;
}

#head_address h1{
	padding: 4% 4% 0% 8%;
  margin-top: 0px;
	font-family:"Gotham Narrow Light";
	font-size: 30px;
	color: #c10230;
	font-style:normal;
	transform: scale(1, .9);
	-webkit-transform: scale(1, .9);
	font-weight:500;
}

#head_address h2{
	padding: 0% 4% 0% 8%;
	font-family:"Gotham Narrow Light";
	font-size: 19px;
	color: #c10230;
	font-style:normal;
	transform: scale(1, .9);
	-webkit-transform: scale(1, .9);
	font-weight:500;
}

.images{
	width: 100%;
	height: 4.8in;
	overflow: hidden;
	margin-top: 1%;
	margin-bottom: 1%;
}
.hero-image{
	width:64%;
	float:left;
	display: inline-block;
}
.second-image, .third-image{
	display: inline-block;
	/* width: 34%;
	height: 48%; */
	float: right;
}

.third-image{
	margin-top: 1.5%;
}

.fillwidth {
  width: 100%;
  height: auto;
}
.fillheight {
  height: 100%;
  width: auto;
}


.trailerleft {
	overflow: hidden;
  width: 64.5%;
  height: 100%;
	display:flex;
	align-items:center;
	justify-content:center;
}

.trailerright {
	overflow: hidden;
  width: 34%;
  height: 48.7%;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* .fill{
	display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden
}

.fill img {
    flex-shrink: 0;
    min-width: 100%;
		min-height: auto;
} */

#greybar{
	width: 5.4in;
	height: 0.3in;
	float: right;
	background-color:#6d6e71;
	border-width:0px;
}

#pspecs{
	color:white;
	float: left;
	margin-left: 4%;
	margin-top: 0.5%;
	font-family: "Gotham Narrow Book";
	transform: scale(1, .9);
	text-transform: uppercase;
	-webkit-transform: scale(1, .9);
	font-size: 20px;
}

#contact-section{
	display: inline-block;
	float: left;
	width: 1.8333in;
	font-size: 10px;
	margin-top: 10%;
}

.moreinfo{
	font-family: "Gotham Rounded Light Italic";
	font-size: 11px;
	margin-bottom: 10%;
}

.contact-info{
	margin-top:4%;
}

.name{
	font-family: "Gotham Narrow Book";
	text-transform: uppercase;
	color: #c10230;
	font-size: 11px;
}
.title{
	font-family: "Gotham Rounded Book Italic";
	color: black;
}

.phone,.email{
	font-family: "Gotham Rounded Book";
}

.con-address{
	margin-top: 10%;
	font-family: "Gotham Rounded Book";
	font-size: 9px;
}

.con-address span{
	font-family: "Gotham Narrow Book";
	font-size: 11px;
}
.disclaimer{
	font-family: "Gotham Rounded Light";
	margin-top: 8%;
	font-size: 9px;
}

#propertyinfo{
	float: right;
	width: 5.3in;
	margin-top: 1%;
}

#pitable{
	width: 100%;
}




.leftcell{
	color: #c10230;
	font-family: "Gotham Rounded Book", sans-serif;
	font-size: 12px;
	font-style: normal;
	vertical-align: middle;
	font-weight: 300;
	width: 35%;
	padding: 2%;
	border-bottom: solid black .5px;
}



.rightcell{
	color: #000000;
	font-family: "Gotham Rounded Book", sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 300;
	padding: 2% 0% 2% 0%;
	border-bottom: solid black .5px;
}

.rightcell.comments, .leftcell.comments{
	border-bottom: 0px !important;
}

.rightcell ul{
	padding-left: 5%;
  margin: 0;
}

footer{
	position:absolute;
	height: 0.52in;
	overflow: hidden;
	width: 100%;
	bottom: 0;
}
.footerimage{
	width: 100%;
	height: 50%;
}
.footerimage img{
	height: 100%;
	width: auto;
	float: right;
}
.footerline{
	margin-top:.4%;
	margin-bottom:.2%;
	height: .5%;
	border-top: .3px solid #58585b;
}
#footerlink{
	float:right;
	height: .5%;
	font-family: "Gotham Narrow Book";
	font-size: 12px;
	color: #c10230;
}

非常感谢您的协助!

1 个答案:

答案 0 :(得分:0)

就我而言,在 pdfkit 选项中调整 dpi 可以解决问题:

options = {
    'dpi': 300 # adjust till it fits (try like 250 or 350)
}

pdfkit.from_file('a.html', 'a.pdf', options = options)